/**
 * tokens.css — Design system custom properties.
 *
 * USAGE: Import this file first in every page stylesheet.
 * All other CSS files reference these tokens — never hard-coded hex values.
 *
 * DARK THEME STRUCTURE (three states, not two):
 *   :root                              → light palette (complete; no gaps)
 *   @media prefers-color-scheme: dark  → overrides for system-dark users
 *   :root[data-theme="dark"]           → overrides for explicit-dark toggle
 *   :root[data-theme="light"]          → no block needed; :root already is light
 *
 * GOLD ON DARK:
 *   --gold          #D97706  — gold on light backgrounds (contrast on white ≈ 4.7:1)
 *   --gold-on-dark  #FBBF24  — gold on dark teal (#0D3D3A) bg, contrast 7.01:1 ✅ AAA
 */

/* ── Light palette (default) ─────────────────────────────── */
:root {

  /* Brand colours */
  --teal:          #0F766E;   /* dominant brand; buttons, active states, borders */
  --teal-dark:     #134E4A;   /* hover on teal elements */
  --teal-deep:     #0D3D3A;   /* result panel background */
  --teal-ghost:    #F0FDFA;   /* ultra-light tint; panel backgrounds, hover states */
  --gold:          #D97706;   /* sparse accent — light-bg use only */
  --gold-on-dark:  #FBBF24;   /* gold for use on --teal-deep; 7.01:1 contrast ✅ */

  /* Neutrals — teal-biased, not pure grey */
  --ink:           #0C1F1E;   /* body text; near-black with teal undertone */
  --ink-muted:     #5C7370;   /* secondary / caption text */
  --paper:         #F8FAFB;   /* page background; cool off-white */
  --surface:       #FFFFFF;   /* elevated surfaces (cards, widget bg) */
  --rule:          #D1DBD9;   /* borders, dividers; teal-tinted */

  /* Input fields */
  --input-bg:      #F4F8F7;   /* field background */
  --input-bd:      #B8CECC;   /* field border */
  --input-bd-focus:#0F766E;   /* field border on focus (= --teal) */

  /* Semantic */
  --danger:        #DC2626;   /* remove/error */
  --danger-muted:  #FEF2F2;   /* error state bg */

  /* ── Typography ─────────────────────────────────────────── */
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:     'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  /* Type scale — major second (1.125) from 1rem base */
  --text-xs:       0.6875rem;   /* 11px — labels, eyebrows */
  --text-sm:       0.8125rem;   /* 13px — captions, metadata */
  --text-base:     1rem;        /* 16px */
  --text-md:       1.0625rem;   /* 17px — body text */
  --text-lg:       1.1875rem;   /* 19px */
  --text-xl:       1.375rem;    /* 22px — subheadings */
  --text-2xl:      1.75rem;     /* 28px */
  --text-3xl:      2.25rem;     /* 36px — section numerals */
  --text-h2:       1.75rem;     /* 28px — section headings */
  --text-h1:       clamp(2.625rem, 5.5vw, 4.125rem); /* 42–66px — Fraunces hero */
  --text-result:   5.5rem;      /* 88px — JetBrains Mono GPA number */

  /* Line heights */
  --leading-tight:  1.07;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-relaxed:1.65;

  /* Letter spacings */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ── Spacing ─────────────────────────────────────────────── */
  /* 4-point base grid */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;

  /* ── Layout ──────────────────────────────────────────────── */
  --wrap-max:     1160px;
  --wrap-pad:     28px;    /* horizontal gutter on both sides */
  --hero-gap:     64px;    /* gap between hero columns */
  --widget-width: 420px;   /* fixed width of calculator widget column */
  --nav-height:   56px;

  /* ── Border radius ───────────────────────────────────────── */
  /* Intentionally restrained — no rounded-lg everywhere */
  --radius-sm:   2px;   /* default for widget, buttons */
  --radius-md:   4px;   /* form fields */
  --radius-full: 9999px;

  /* ── Calculator widget modernisation tokens ──────────────── */
  --calc-radius:     12px;   /* widget card corners */
  --input-radius:    8px;    /* target-form inputs / selects */
  --btn-radius:      8px;    /* CTA calculate button */
  --calc-shadow:     0 4px 24px rgba(13, 61, 58, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  --btn-shadow:      0 2px 8px rgba(15, 118, 110, 0.30);
  --btn-shadow-hover:0 6px 20px rgba(15, 118, 110, 0.40);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-sm: 120ms;
  --duration-md: 200ms;

  /* ── Focus ring ──────────────────────────────────────────── */
  --focus-ring: 2px solid var(--teal);
  --focus-offset: 2px;
}

/* ── Dark palette — system preference ───────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal:          #2DD4C8;
    --teal-dark:     #14B8A6;
    --teal-deep:     #061413;
    --teal-ghost:    #0D2623;
    --gold:          #F59E0B;
    --gold-on-dark:  #FBBF24;

    --ink:           #E2F4F2;
    --ink-muted:     #7AA8A4;
    --paper:         #0A1A19;
    --surface:       #0F2523;
    --rule:          #1A3330;

    --input-bg:      #0A1A19;
    --input-bd:      #1A3330;
    --input-bd-focus:#2DD4C8;

    --danger:        #F87171;
    --danger-muted:  #1C0909;

    /* Calculator shadows — subtler on dark backgrounds */
    --calc-shadow:     0 4px 24px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.20);
    --btn-shadow:      0 2px 8px rgba(45, 212, 200, 0.20);
    --btn-shadow-hover:0 6px 20px rgba(45, 212, 200, 0.30);
  }
}

/* ── Dark palette — explicit toggle ─────────────────────── */
:root[data-theme="dark"] {
  --teal:          #2DD4C8;
  --teal-dark:     #14B8A6;
  --teal-deep:     #061413;
  --teal-ghost:    #0D2623;
  --gold:          #F59E0B;
  --gold-on-dark:  #FBBF24;

  --ink:           #E2F4F2;
  --ink-muted:     #7AA8A4;
  --paper:         #0A1A19;
  --surface:       #0F2523;
  --rule:          #1A3330;

  --input-bg:      #0A1A19;
  --input-bd:      #1A3330;
  --input-bd-focus:#2DD4C8;

  --danger:        #F87171;
  --danger-muted:  #1C0909;

  /* Calculator shadows — subtler on dark backgrounds */
  --calc-shadow:     0 4px 24px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.20);
  --btn-shadow:      0 2px 8px rgba(45, 212, 200, 0.20);
  --btn-shadow-hover:0 6px 20px rgba(45, 212, 200, 0.30);
}