/* =============================================================================
   Northeast State — 2026 Design Token System
   ----------------------------------------------------------------------------
   φ (golden ratio) = 1.6180339887
   Spacing scale:   8px base × φⁿ  → 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233
   Type scale:      Fibonacci-derived steps (each major step ≈ φ)
   Container widths, radii, line-heights, and button padding ratios all use φ.
   ----------------------------------------------------------------------------
   File purpose: single source of truth for visual design.
   Override per-component by remapping tokens, not by ad-hoc values.
   ============================================================================= */

:root {
  /* ---------- Brand palette (extracted from live site) -------------------- */
  --brand-navy-950: #061a2d;
  --brand-navy-900: #0a2540;   /* header / top bar */
  --brand-navy-800: #11314c;
  --brand-navy-700: #1f4569;   /* program-cards section */
  --brand-navy-600: #00476c;   /* deep CTA bg */
  --brand-navy-500: #156e99;   /* steel-blue accent */
  --brand-navy-400: #3a8bb6;
  --brand-navy-300: #7fb1cf;
  --brand-navy-200: #c2dbe9;
  --brand-navy-100: #e6eff5;

  --brand-teal-900: #06393a;
  --brand-teal-800: #084c4d;
  --brand-teal-700: #0a5b5c;   /* hover */
  --brand-teal-600: #0d7172;   /* primary CTA */
  --brand-teal-500: #2a9292;
  --brand-teal-400: #4ab3b4;
  --brand-teal-300: #8fd1d2;
  --brand-teal-200: #c2e6e7;
  --brand-teal-100: #e3f3f3;

  /* ---------- Neutrals ---------------------------------------------------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f9fa;
  --neutral-100: #eef1f4;
  --neutral-200: #dde1e6;
  --neutral-300: #c4cad2;
  --neutral-400: #9aa2ad;
  --neutral-500: #6c757d;
  --neutral-600: #4b5563;
  --neutral-700: #2f3640;
  --neutral-800: #1a1f2a;
  --neutral-900: #0d1117;

  /* ---------- Semantic surface / text ------------------------------------- */
  --color-bg:               var(--neutral-50);
  --color-surface:          var(--neutral-0);
  --color-surface-alt:      var(--neutral-100);
  --color-surface-dark:     var(--brand-navy-900);
  --color-surface-deep:     var(--brand-navy-700);

  --color-text-primary:     var(--neutral-800);
  --color-text-secondary:   var(--neutral-600);
  --color-text-muted:       var(--neutral-600); /* WCAG AA: 7.17:1 on bg, was 4.45:1 */
  --color-text-inverse:     var(--neutral-0);
  --color-text-on-brand:    var(--neutral-0);

  --color-link:             var(--brand-navy-500);
  --color-link-hover:       var(--brand-navy-700);

  --color-accent:           var(--brand-teal-600);
  --color-accent-hover:     var(--brand-teal-700);
  --color-accent-soft:      var(--brand-teal-100);

  --color-border:           var(--neutral-200);
  --color-border-strong:    var(--neutral-300);
  --color-border-inverse:   rgba(255, 255, 255, 0.18);

  --color-focus-ring:       var(--brand-navy-500); /* 4.51:1 on white — passes WCAG 1.4.11 */

  /* ---------- Status colors ---------------------------------------------- */
  --color-success:          #198754;
  --color-success-soft:     #d1f0df;
  --color-success-strong:   #0e5a39;
  --color-warning:          #c98c10;
  --color-warning-soft:     #fbf0d4;
  --color-warning-strong:   #6e4309;
  --color-warning-deep:     #855008;
  --color-danger:           #b42318;
  --color-danger-soft:      #fde0de;
  --color-danger-strong:    #7a160f;
  --color-danger-hover:     #931d12;
  --color-info:             var(--brand-navy-500);
  --color-info-soft:        var(--brand-navy-100);

  /* ---------- Spacing scale (8px × φⁿ, rounded) -------------------------- */
  --space-3xs: 0.125rem;   /*   2px  — hairline gaps */
  --space-2xs: 0.1875rem;  /*   3px  — icon offsets */
  --space-xs:  0.3125rem;  /*   5px  — chip padding */
  --space-sm:  0.5rem;     /*   8px  — base unit */
  --space-md:  0.8125rem;  /*  13px  — 8 × φ */
  --space-lg:  1.3125rem;  /*  21px  — 8 × φ² */
  --space-xl:  2.125rem;   /*  34px  — 8 × φ³ */
  --space-2xl: 3.4375rem;  /*  55px  — 8 × φ⁴ */
  --space-3xl: 5.5625rem;  /*  89px  — 8 × φ⁵ */
  --space-4xl: 9rem;       /* 144px  — 8 × φ⁶ */
  --space-5xl: 14.5625rem; /* 233px  — 8 × φ⁷ */

  /* ---------- Type scale (Fibonacci-derived; each major step ≈ φ) -------- */
  --text-2xs:  0.6875rem;  /* 11px  */
  --text-xs:   0.8125rem;  /* 13px  */
  --text-sm:   0.875rem;   /* 14px  */
  --text-base: 1rem;       /* 16px — body */
  --text-md:   1.125rem;   /* 18px — lead */
  --text-lg:   1.3125rem;  /* 21px — H6 */
  --text-xl:   1.625rem;   /* 26px — H5 */
  --text-2xl:  2.125rem;   /* 34px — H4 */
  --text-3xl:  2.75rem;    /* 44px — H3 */
  --text-4xl:  3.4375rem;  /* 55px — H2 / display sm */
  --text-5xl:  4.5rem;     /* 72px — H1 */
  --text-6xl:  5.5625rem;  /* 89px — display lg */

  /* ---------- Line heights (φ-anchored) ---------------------------------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.618;    /* φ — long-form reading */

  /* ---------- Font families ---------------------------------------------- */
  --font-display: "PT Serif", Georgia, "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Liberation Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- Font weights ----------------------------------------------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---------- Tracking --------------------------------------------------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Radii (square-leaning, matches brand) ---------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   13px;
  --radius-xl:   21px;
  --radius-pill: 999px;

  /* ---------- Borders ---------------------------------------------------- */
  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-border-strong);
  --border-inverse:  1px solid var(--color-border-inverse);

  /* ---------- Shadows (φ-based offset progression) ----------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-sm: 0 2px 5px rgba(10, 37, 64, 0.08);
  --shadow-md: 0 8px 21px rgba(10, 37, 64, 0.10);
  --shadow-lg: 0 13px 34px rgba(10, 37, 64, 0.12);
  --shadow-xl: 0 21px 55px rgba(10, 37, 64, 0.14);

  /* ---------- Containers (φ-scaled widths) ------------------------------- */
  --container-sm: 34rem;   /*  544px */
  --container-md: 55rem;   /*  880px */
  --container-lg: 72rem;   /* 1152px */
  --container-xl: 89rem;   /* 1424px */

  /* ---------- Button padding (horizontal:vertical = φ) ------------------- */
  --btn-py-sm: var(--space-sm);    /*  8px */
  --btn-px-sm: var(--space-md);    /* 13px (≈ 8 × φ) */
  --btn-py-md: var(--space-md);    /* 13px */
  --btn-px-md: var(--space-lg);    /* 21px (≈ 13 × φ) */
  --btn-py-lg: var(--space-lg);    /* 21px */
  --btn-px-lg: var(--space-xl);    /* 34px (≈ 21 × φ) */

  /* ---------- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------- Z-index ---------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1500;
}