/* NPS Brand OS v1.1.0 — CSS custom properties
 * Generated from content/tokens.json
 * Default :root = light. Add class "dark" or "mono" on html.
 * No font-face rules in this file (licence). Products fall back to system-ui
 * until licensed woff2 files are added.
 */

:root {
  /* raw palette — edit here, not on semantic roles */
  --color-glacier: #2F4D5C;
  --color-ice: #758D9D;
  --color-deep-navy: #1E3340;
  --color-steel: #5B74A6;
  --color-steel-ink: #4E6799;
  --color-offwhite: #F9FAFB;
  --color-offwhite-alt: #ECEFF1;
  --color-fog: #6B7280;
  --color-ice-white: #F8F9FA;
  --color-carbon: #0B0E11;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-clear: #22C55E;
  --color-caution: #EAB308;
  --color-alarm: #DC2626;
  --color-clear-dark: #4ADE80;
  --color-caution-dark: #FACC15;
  --color-alarm-dark: #F87171;
  --color-fog-dark: #9CA3AF;
  --color-surface-dark: #111827;
  --color-watch-desk-dark: #1F2937;

  /* semantic roles — aliases point at the palette */
  --color-bg: var(--color-offwhite);
  --color-surface: var(--color-white);
  --color-surface-sec: var(--color-offwhite-alt);
  --color-primary: var(--color-glacier);
  --color-primary-hover: #3D5A69;
  --color-primary-active: #28404D;
  --color-primary-disabled: #A8B5BB;
  --color-accent: var(--color-steel);
  --color-accent-hover: #7A8FB7;
  --color-accent-active: #4B6088;
  --color-accent-disabled: #BAC4D9;
  --color-accent-soft: var(--color-ice);
  --color-accent-text: var(--color-steel-ink);
  --color-text: var(--color-deep-navy);
  --color-text-sec: var(--color-fog);
  --color-text-muted: var(--color-fog);
  --color-border: var(--color-offwhite-alt);
  --color-focus: var(--color-steel);
  --color-success: var(--color-clear);
  --color-warning: var(--color-caution);
  --color-error: var(--color-alarm);

  --color-bg-rgb: 249, 250, 251;
  --color-surface-rgb: 255, 255, 255;
  --color-primary-rgb: 47, 77, 92;
  --color-primary-hover-rgb: 61, 90, 105;
  --color-accent-rgb: 91, 116, 166;
  --color-text-rgb: 30, 51, 64;
  --color-success-rgb: 34, 197, 94;
  --color-error-rgb: 220, 38, 38;

  --font-main: 'ABC Monument Grotesk', system-ui, sans-serif;
  --font-mono: 'ABC Monument Grotesk Mono', ui-monospace, monospace;
  --font-display: 'ABC Monument Grotesk Condensed', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --card-padding: var(--space-5);
  --card-radius: var(--radius-lg);
  --card-gap: var(--space-5);
  --section-gap: var(--space-7);
  --section-gap-md: var(--space-9);
  --icon-size: 24px;
  --icon-stroke: 2;
  --btn-height-sm: 32px;
  --btn-height-md: 44px;
  --btn-height-lg: 56px;
  --btn-radius: var(--radius-md);
  --glass-blur: 16px;
}

html.dark {

  /* semantic roles — aliases point at the palette */
  --color-bg: var(--color-carbon);
  --color-surface: var(--color-surface-dark);
  --color-surface-sec: var(--color-watch-desk-dark);
  --color-primary: var(--color-ice);
  --color-primary-hover: #8FA3B0;
  --color-primary-active: #607481;
  --color-primary-disabled: #354149;
  --color-accent: var(--color-steel);
  --color-accent-hover: #7A8FB7;
  --color-accent-active: #4B6088;
  --color-accent-disabled: #2B374D;
  --color-accent-soft: var(--color-ice);
  --color-accent-text: var(--color-ice);
  --color-text: var(--color-ice-white);
  --color-text-sec: var(--color-fog-dark);
  --color-text-muted: var(--color-fog-dark);
  --color-border: var(--color-watch-desk-dark);
  --color-focus: var(--color-steel);
  --color-success: var(--color-clear-dark);
  --color-warning: var(--color-caution-dark);
  --color-error: var(--color-alarm-dark);

  --color-bg-rgb: 11, 14, 17;
  --color-surface-rgb: 17, 24, 39;
  --color-primary-rgb: 117, 141, 157;
  --color-primary-hover-rgb: 143, 163, 176;
  --color-accent-rgb: 91, 116, 166;
  --color-text-rgb: 248, 249, 250;
  --color-success-rgb: 74, 222, 128;
  --color-error-rgb: 248, 113, 113;
}

html.mono {

  /* semantic roles — aliases point at the palette */
  --color-bg: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-sec: #F5F5F5;
  --color-primary: var(--color-black);
  --color-primary-hover: #333333;
  --color-primary-active: var(--color-black);
  --color-primary-disabled: #B3B3B3;
  --color-accent: var(--color-black);
  --color-accent-hover: #333333;
  --color-accent-active: var(--color-black);
  --color-accent-disabled: #B3B3B3;
  --color-accent-soft: #222222;
  --color-accent-text: var(--color-black);
  --color-text: var(--color-black);
  --color-text-sec: #444444;
  --color-text-muted: #444444;
  --color-border: var(--color-black);
  --color-focus: var(--color-black);
  --color-success: var(--color-black);
  --color-warning: var(--color-black);
  --color-error: var(--color-black);

  --color-bg-rgb: 255, 255, 255;
  --color-surface-rgb: 255, 255, 255;
  --color-primary-rgb: 0, 0, 0;
  --color-primary-hover-rgb: 51, 51, 51;
  --color-accent-rgb: 0, 0, 0;
  --color-text-rgb: 0, 0, 0;
  --color-success-rgb: 0, 0, 0;
  --color-error-rgb: 0, 0, 0;
}

@media (min-width: 768px) {
  :root {
    --section-gap: var(--section-gap-md);
  }
}

.typo-display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.typo-h1 {
  font-family: var(--font-main);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.typo-h2 {
  font-family: var(--font-main);
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.typo-h3 {
  font-family: var(--font-main);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.typo-h4 {
  font-family: var(--font-main);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.3;
}
.typo-bodyLg {
  font-family: var(--font-main);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
}
.typo-body {
  font-family: var(--font-main);
  font-size: clamp(1rem, 1rem, 1rem);
  font-weight: 400;
  line-height: 1.55;
}
.typo-caption {
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 0.6875rem, 0.6875rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.typo-mono {
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 0.8125rem, 0.8125rem);
  font-weight: 400;
  line-height: 1.5;
}