/* ==========================================================================
   Teen Finance Coach — design tokens
   "Ink wash": a monochrome grayscale system. Dark mode's ground is #252525,
   light mode's ground is #CFCFCF, and #7D7D7D / #545454 carry the mid-tones
   (borders, muted text, secondary accents) in both. Each theme's accent pop
   borrows the OTHER theme's ground color — dark mode's accent is the light
   #CFCFCF, light mode's accent is the dark #252525 — so the accent always
   reads as the sharpest contrast on the page.
   Green and red are DATA colors only: they mean "up" and "down" in a market
   context and are the sole surviving hues, held below the accent in
   saturation so they never read as decoration. Gold (rewards) also stays a
   hue for the same reason — it signals an achievement, not brand color.
   ========================================================================== */

/* ---------- Typefaces ---------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-400_700.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* ---------- Base scale: identical in both themes ------------------------- */

:root {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale. Steps are named by role, not by size. */
  --text-micro: 0.6875rem;
  --text-caption: 0.75rem;
  --text-small: 0.8125rem;
  --text-body: 0.9375rem;
  --text-lead: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h2: clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --text-h1: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --text-figure: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.02em;

  /* Spacing: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shell-max: 94rem;
  --wide-max: 108rem;
  --reading-max: 48rem;

  /* Motion. Every animated duration in the app reads from these. */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-reveal: 620ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Dark: the designed-for base ---------------------------------- */

:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* Ground is the ink-wash primary, #252525. Surfaces step up from it in
     flat gray, no hue. */
  --bg: #252525;
  --bg-sunk: #1a1a1a;
  --surface: #2e2e2e;
  --surface-raised: #363636;
  --surface-hover: #3d3d3d;
  --surface-inset: #202020;

  --line: #3d3d3d;
  --line-strong: #545454;
  --line-faint: #2a2a2a;

  --text: #e8e8e8;
  --text-strong: #ffffff;
  --text-muted: #a0a0a0;
  --text-faint: #8a8a8a;
  /* Accent is the palette's lightest gray, so ink on it stays dark. */
  --text-on-accent: #1a1a1a;

  /* Accent borrows light mode's ground — the opposite end of the wash —
     so it's the sharpest thing on a dark page. */
  --accent: #cfcfcf;
  --accent-hover: #e2e2e2;
  --accent-text: #cfcfcf;
  --accent-fill: #3a3a3a;
  --accent-line: #545454;
  --accent-edge: #cfcfcf;
  --accent-glow: rgba(207, 207, 207, 0.22);

  /* Card tints. Held close to the surface here — on a dark ground a strong
     tint reads as an error state rather than as decoration. */
  --tint-1: #2c2c2c;
  --tint-1-line: #454545;
  --tint-2: #2a2a2a;
  --tint-2-line: #424242;
  --tint-3: #2b2b2b;
  --tint-3-line: #434343;
  --tint-4: #292929;
  --tint-4-line: #414141;

  /* Data-only. Direction of a number, never decoration. Green appears here
     and nowhere else: on a market number it carries meaning. */
  --up: #6fcf97;
  --up-fill: #16301f;
  --down: #f2a0b0;
  --down-fill: #331f26;

  /* Reward states: streaks, achievements. */
  --gold: #f0d08a;
  --gold-fill: #33291a;
  --gold-bright: #f0d08a;

  --danger: #f2a0b0;
  --danger-fill: #331f26;
  --danger-line: #6b3441;

  /* Hero slabs. Ink tokens are re-pointed inside them so every child rule
     that reads --text or --accent keeps working against the block. */
  --surface-feature: #363636;
  --text-on-feature: #f2f2f2;
  --text-on-feature-muted: #b8b8b8;
  --line-on-feature: #545454;
  --accent-on-feature: #f0d08a;
  --ink-on-feature-accent: #33270d;
  --feature-wash: rgba(255, 255, 255, 0.06);

  --grid-line: rgba(207, 207, 207, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.58);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 8px 28px -8px var(--accent-glow);
  --edge-light: rgba(255, 255, 255, 0.06);
}

/* ---------- Light: the same system, inverted ----------------------------- */

html[data-theme="light"] {
  color-scheme: light;

  /* Ground is the ink-wash primary, #CFCFCF. */
  --bg: #cfcfcf;
  --bg-sunk: #c0c0c0;
  --surface: #e6e6e6;
  --surface-raised: #eeeeee;
  --surface-hover: #dcdcdc;
  --surface-inset: #c7c7c7;

  --line: #b8b8b8;
  --line-strong: #7d7d7d;
  --line-faint: #d6d6d6;

  --text: #1e1e1e;
  --text-strong: #050505;
  --text-muted: #545454;
  --text-faint: #666666;
  --text-on-accent: #ffffff;

  /* Accent borrows dark mode's ground — the opposite end of the wash —
     so it's the sharpest thing on a light page. */
  --accent: #252525;
  --accent-hover: #050505;
  --accent-text: #252525;
  --accent-fill: #dcdcdc;
  --accent-line: #a8a8a8;
  --accent-edge: transparent;
  --accent-glow: rgba(37, 37, 37, 0.2);

  --up: #0d7f43;
  --up-fill: #e4f6ec;
  --down: #c8303f;
  --down-fill: #fdeaec;

  --gold: #9c6205;
  --gold-fill: #fdf2dc;
  --gold-bright: #9c6205;

  --danger: #c8303f;
  --danger-fill: #fdeaec;
  --danger-line: #f3c2c7;

  /* Light keeps plain cards and a tinted hero — the tint and feature
     machinery both fold back to the ordinary surface here, so only dark
     renders coloured card blocks and a slab hero. */
  --tint-1: var(--surface);
  --tint-1-line: var(--line);
  --tint-2: var(--surface);
  --tint-2-line: var(--line);
  --tint-3: var(--surface);
  --tint-3-line: var(--line);
  --tint-4: var(--surface);
  --tint-4-line: var(--line);

  --surface-feature: var(--surface);
  --text-on-feature: var(--text);
  --text-on-feature-muted: var(--text-muted);
  --line-on-feature: var(--line-strong);
  --accent-on-feature: var(--accent);
  --ink-on-feature-accent: var(--text-on-accent);
  --feature-wash: var(--accent-fill);

  --grid-line: rgba(37, 37, 37, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 8px 24px -10px rgba(20, 20, 20, 0.2);
  --shadow-lg: 0 24px 60px -20px rgba(20, 20, 20, 0.24);
  --shadow-accent: 0 8px 28px -10px var(--accent-glow);
  --edge-light: rgba(20, 20, 20, 0.05);
}


/* Users who ask for less motion get none of the choreography. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}