/* ==========================================================================
   FTRPRF Design System — Design Tokens
   Import this file first on every page.
   ========================================================================== */

/* ---------- Self-hosted brand fonts ---------- */
/* Fraunces — variable (opsz + wght), upright + italic */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Plus Jakarta Sans — variable wght, upright + italic */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono — static weights (woff2) */
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Thin.woff2') format('woff2');         font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ThinItalic.woff2') format('woff2');   font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');   font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Light.woff2') format('woff2');        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-LightItalic.woff2') format('woff2');  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2');       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2');     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');    font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand palette — Futureproof Blue ------------------------ */
  --blue-50:  #EEF3FF;
  --blue-100: #DCE5FF;
  --blue-200: #B6C7FF;
  --blue-300: #8DA8FF;
  --blue-400: #5E84FF;
  --blue-500: #2D5BFF; /* Primary */
  --blue-600: #1E43E0;
  --blue-700: #1735B3;
  --blue-800: #122988;
  --blue-900: #0D1E63;
  --blue-950: #07123F;

  /* ---------- Accents — playful, considered ------------------------- */
  --yellow-400: #FFD564;
  --yellow-500: #FFC83D; /* Lift Yellow */
  --yellow-600: #E6AE1A;

  --coral-400: #FF9182;
  --coral-500: #FF6E5A; /* Orbit Coral */
  --coral-600: #E04F3A;

  --green-400: #5BD6A8;
  --green-500: #2FC18B; /* Lesson Green */
  --green-600: #1EA371;

  --plum-400: #8F7AFF;
  --plum-500: #6B4EFF; /* Citizen Plum */
  --plum-600: #5538E0;

  /* ---------- Warm-cool slate neutrals ------------------------------ */
  --slate-0:   #FFFFFF;
  --slate-50:  #F7F8FB;
  --slate-100: #EEF1F6;
  --slate-200: #DDE2EC;
  --slate-300: #C1C8D6;
  --slate-400: #8E97A8;
  --slate-500: #646D81;
  --slate-600: #434B5D;
  --slate-700: #2A3142;
  --slate-800: #171C2B;
  --slate-900: #0B1220; /* Ink */
  --slate-950: #060A16;

  /* ---------- Semantic — LIGHT MODE (default) ---------------------- */
  --bg:              var(--slate-50);
  --bg-raised:       var(--slate-0);
  --surface-1:       var(--slate-0);
  --surface-2:       var(--slate-50);
  --surface-sunken:  var(--slate-100);

  --fg:              var(--slate-900);
  --fg-muted:        var(--slate-600);
  --fg-subtle:       var(--slate-500);
  --fg-on-primary:   var(--slate-0);

  --border-subtle:   var(--slate-200);
  --border-strong:   var(--slate-300);
  --border-focus:    var(--blue-500);

  --primary:         var(--blue-500);
  --primary-hover:   var(--blue-600);
  --primary-press:   var(--blue-700);
  --primary-soft:    var(--blue-50);
  --primary-soft-fg: var(--blue-700);

  --success:   var(--green-500);
  --success-soft: color-mix(in oklab, var(--green-500) 14%, var(--slate-0));
  --warning:   var(--yellow-500);
  --warning-soft: color-mix(in oklab, var(--yellow-500) 22%, var(--slate-0));
  --danger:    var(--coral-500);
  --danger-soft: color-mix(in oklab, var(--coral-500) 14%, var(--slate-0));
  --info:      var(--blue-500);
  --info-soft: var(--blue-50);

  --ring: color-mix(in oklab, var(--blue-500) 55%, transparent);

  /* ---------- Spacing (4px base) --------------------------------- */
  --space-0: 0;
  --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;
  --space-10: 128px;

  /* ---------- Radii --------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------------------------------------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(11,18,32,.04), 0 1px 1px rgba(11,18,32,.03);
  --elev-2: 0 4px 12px -2px rgba(11,18,32,.06), 0 2px 4px -2px rgba(11,18,32,.04);
  --elev-3: 0 12px 32px -8px rgba(11,18,32,.12), 0 4px 8px -4px rgba(11,18,32,.06);
  --elev-4: 0 32px 64px -16px rgba(11,18,32,.22), 0 8px 16px -8px rgba(11,18,32,.08);
  --elev-focus: 0 0 0 4px var(--ring);

  /* ---------- Motion ------------------------------------------- */
  --ease-out-expo:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quick:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:   120ms;
  --dur-short:   200ms;
  --dur-base:    300ms;
  --dur-enter:   400ms;
  --dur-hero:    600ms;

  /* ---------- Type families ------------------------------------ */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (modular 1.2–1.25) ------------------- */
  --fs-12: 0.75rem;    /* 12 — micro */
  --fs-14: 0.875rem;   /* 14 — small / UI */
  --fs-16: 1rem;       /* 16 — body */
  --fs-18: 1.125rem;   /* 18 — body-lg */
  --fs-20: 1.25rem;    /* 20 — lead */
  --fs-24: 1.5rem;     /* 24 — h5 */
  --fs-30: 1.875rem;   /* 30 — h4 */
  --fs-36: 2.25rem;    /* 36 — h3 */
  --fs-48: 3rem;       /* 48 — h2 */
  --fs-60: 3.75rem;    /* 60 — h1 */
  --fs-72: 4.5rem;     /* 72 — display */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ---------- Mesh background tokens --------------------------- */
  --mesh-soft:
    radial-gradient(60% 45% at 8% 0%, color-mix(in oklab, var(--blue-500) 18%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 95% 10%, color-mix(in oklab, var(--coral-500) 14%, transparent) 0%, transparent 60%),
    radial-gradient(55% 45% at 50% 110%, color-mix(in oklab, var(--plum-500) 16%, transparent) 0%, transparent 60%),
    var(--bg);
  --mesh-bold:
    radial-gradient(50% 40% at 10% 10%, color-mix(in oklab, var(--blue-500) 55%, transparent) 0%, transparent 55%),
    radial-gradient(55% 45% at 90% 20%, color-mix(in oklab, var(--plum-500) 45%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 60% 100%, color-mix(in oklab, var(--coral-500) 40%, transparent) 0%, transparent 60%),
    radial-gradient(40% 35% at 30% 70%, color-mix(in oklab, var(--yellow-500) 35%, transparent) 0%, transparent 60%),
    var(--blue-900);
}

/* ---------- DARK MODE ----------------------------------------- */
.theme-dark,
[data-theme="dark"] {
  --bg:              var(--slate-950);
  --bg-raised:       var(--slate-900);
  --surface-1:       var(--slate-900);
  --surface-2:       var(--slate-800);
  --surface-sunken:  var(--slate-950);

  --fg:              #ECEFF7;
  --fg-muted:        #A6AEC2;
  --fg-subtle:       #7B849A;
  --fg-on-primary:   var(--slate-950);

  --border-subtle:   color-mix(in oklab, var(--slate-700) 75%, transparent);
  --border-strong:   var(--slate-700);
  --border-focus:    var(--blue-400);

  --primary:         var(--blue-400);
  --primary-hover:   var(--blue-300);
  --primary-press:   var(--blue-200);
  --primary-soft:    color-mix(in oklab, var(--blue-500) 22%, var(--slate-900));
  --primary-soft-fg: var(--blue-200);

  --success-soft: color-mix(in oklab, var(--green-500) 22%, var(--slate-900));
  --warning-soft: color-mix(in oklab, var(--yellow-500) 28%, var(--slate-900));
  --danger-soft:  color-mix(in oklab, var(--coral-500) 22%, var(--slate-900));
  --info-soft:    color-mix(in oklab, var(--blue-500) 22%, var(--slate-900));

  --ring: color-mix(in oklab, var(--blue-400) 70%, transparent);

  --elev-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.28);
  --elev-2: 0 4px 12px -2px rgba(0,0,0,.45), 0 2px 4px -2px rgba(0,0,0,.3);
  --elev-3: 0 12px 32px -8px rgba(0,0,0,.55), 0 4px 8px -4px rgba(0,0,0,.35);
  --elev-4: 0 32px 64px -16px rgba(0,0,0,.65), 0 8px 16px -8px rgba(0,0,0,.4);

  --mesh-soft:
    radial-gradient(55% 40% at 5% 0%, color-mix(in oklab, var(--blue-500) 38%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 95% 5%, color-mix(in oklab, var(--plum-500) 35%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 50% 110%, color-mix(in oklab, var(--coral-500) 28%, transparent) 0%, transparent 60%),
    var(--bg);
}

/* ==========================================================================
   Base reset + element styles
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  font-variation-settings: "opsz" 120;
  text-wrap: balance;
}
h1 { font-size: clamp(var(--fs-48), 5vw + 1rem, var(--fs-72)); }
h2 { font-size: clamp(var(--fs-36), 3.5vw + 1rem, var(--fs-48)); }
h3 { font-size: var(--fs-30); }
h4 { font-size: var(--fs-24); font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }

h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-size: var(--fs-12);
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-4); max-width: 68ch; }
p.lead { font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg-muted); }

a {
  color: var(--primary);
  text-decoration-color: color-mix(in oklab, var(--primary) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-short) var(--ease-in-out);
}
a:hover { color: var(--primary-hover); text-decoration-color: currentColor; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.925em;
}
code {
  padding: 0.1em 0.35em;
  background: var(--surface-sunken);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

/* ---------- Focus ring — always visible for keyboard ---------- */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- Utility classes ---------------------------------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--primary);
}
.display { font-family: var(--font-display); font-variation-settings: "opsz" 144; }
.mono { font-family: var(--font-mono); }
.mesh-soft { background: var(--mesh-soft); }
.mesh-bold { background: var(--mesh-bold); color: #fff; }