/**
 * FitloHub design tokens — the single place colour is decided.
 *
 * Light is the base (`:root`); dark redefines the same token NAMES with
 * different VALUES. Nothing downstream should ever branch on the theme — if a
 * rule needs `[data-theme="dark"]` to pick a colour, the token set is missing a
 * role, and the fix belongs here.
 *
 * This replaces the previous approach of patching ~90 individual selectors in
 * theme.css, which is how `.hero em` got a readable light-mode colour while
 * `.ai-band h2 em`, `.cta-section h2 em` and `.legal-kicker` were left on aqua
 * at 1.6–1.7:1 against a near-white background.
 *
 * Roles follow DESIGN.md §3. Where a hue is used both as a decorative fill and
 * as text, there are two tokens — e.g. `--motion` (fills, borders, dots) and
 * `--motion-ink` (text), because aqua that reads well on midnight does not read
 * at all on cool-white.
 */

:root {
  color-scheme: light;

  /* ---- Page surfaces ------------------------------------------------ */
  --canvas: #f8fafc;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f5f9;
  --hairline: #e2e8f0;
  --hairline-strong: #d8ddea;

  /* ---- Text --------------------------------------------------------- */
  --ink: #0f172a;
  --ink-muted: #5c6a7d;
  /* Decoration only — never the sole colour of text. */
  --ink-subtle: #94a3b8;

  /* ---- Brand -------------------------------------------------------- */
  --brand: #7357ff;
  --brand-pressed: #5036e8;
  /* Purple used as a FILL behind `--on-brand` text. Stays at the darker value
     in both themes: dark mode's lighter #8b76ff only reaches 3.4:1 with white. */
  --brand-fill: #7357ff;
  /* Brand used AS TEXT on a page surface — needs to clear AA on its own. */
  --brand-ink: #5036e8;
  --brand-tint: #f1edff;
  --brand-tint-hairline: #ddd6fe;
  --brand-tint-ink: #312e81;
  --on-brand: #ffffff;

  /* ---- Motion / live / progress (aqua) ------------------------------ */
  --motion: #00d9c0;
  /* Aqua used AS TEXT. On light this must darken; on dark it stays bright. */
  --motion-ink: #00776c;
  --motion-tint: #ecfdf8;
  --motion-tint-hairline: #bcece2;
  --motion-tint-ink: #17675e;

  /* ---- Remaining accents (DESIGN.md §3) -----------------------------
   * Each accent has a fill (`--x`), a chip tint (`--x-tint`) and an AA-safe
   * on-tint value (`--x-tint-ink`). The six pillars are colour-coded with
   * these; keeping the trio together is what stops the tint and the glyph
   * drifting apart between themes.
   * ------------------------------------------------------------------ */
  --lime: #c9ff3d;
  --on-lime: #0b0c16;
  --lime-tint: #f1ffd2;
  --lime-tint-ink: #5c7a00;
  --sport-orange: #ff7b3e;
  --orange-tint: #fff0e9;
  --orange-tint-ink: #b8431a;
  --achievement-pink: #ff4f9a;
  --pink-tint: #ffe9f3;
  --pink-tint-ink: #b51f61;
  --info-blue: #4c8dff;
  --blue-tint: #eaf1ff;
  --blue-tint-ink: #1f57b5;
  --danger: #d92d20;
  --success: #168a79;

  /* ---- Feature bands -------------------------------------------------
   * Hero, organiser, AI, CTA and journey sections. Cinematic midnight in
   * dark mode; cool-white / lavender / mint in light, per DESIGN.md §8
   * ("black and midnight surfaces are exclusive to Dark mode").
   * ------------------------------------------------------------------ */
  --band-ink: #0f172a;
  --band-ink-muted: #5c6a7d;
  --band-ink-subtle: #5c6a7d;
  --band-surface: #ffffff;
  --band-hairline: #e2e8f0;
  --band-glow-brand: rgba(115, 87, 255, 0.1);
  --band-glow-motion: rgba(0, 143, 130, 0.09);
  --band-grid-line: rgba(100, 116, 139, 0.055);

  --hero-bg:
    radial-gradient(circle at 78% 35%, var(--band-glow-motion), transparent 25%),
    radial-gradient(circle at 25% 16%, var(--band-glow-brand), transparent 34%),
    #f8fafc;
  --organiser-bg: linear-gradient(135deg, #f8fafc 0%, #f3f0ff 58%, #ecfdf8 100%);
  --ai-bg: linear-gradient(135deg, #f8fafc, #f1f5f9);
  --cta-bg: linear-gradient(135deg, #f3f0ff, #ecfdf8);
  --journey-bg: linear-gradient(135deg, #f1f5f9, #f3f0ff);
  --india-bg: #ecfdf8;
  --india-ink-muted: #3f6d66;
  --india-node-surface: #ffffff;
  --india-node-hairline: #ccece7;
  --india-thread: #6ecdc0;

  /* ---- Site header --------------------------------------------------- */
  --header-ink: #0f172a;
  --header-ink-muted: #5c6a7d;
  --header-ink-hover: #5036e8;
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-bg-solid: rgba(255, 255, 255, 0.96);
  --header-hairline: rgba(226, 232, 240, 0.8);
  --header-panel: #ffffff;

  /* ---- Buttons -------------------------------------------------------
   * Primary is purple-on-white in light and lime-on-midnight in dark
   * (DESIGN.md §7: "Primary on dark: lime fill"; "Primary on light: purple").
   * ------------------------------------------------------------------ */
  --btn-primary-bg: #7357ff;
  --btn-primary-ink: #ffffff;
  --btn-primary-shadow: 0 12px 28px rgba(115, 87, 255, 0.2);
  --btn-quiet-bg: #ffffff;
  --btn-quiet-ink: #0f172a;
  --btn-quiet-hairline: #d8ddea;
  --btn-quiet-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

  /* ---- Product mockups ----------------------------------------------
   * The phone and console are CSS renderings of the app, so they follow the
   * app's own appearance rather than the page's.
   * ------------------------------------------------------------------ */
  --mock-canvas: #f8f9fd;
  --mock-surface: #ffffff;
  --mock-ink: #0f172a;
  --mock-ink-muted: #6b7280;
  --mock-hairline: #e4e6ef;
  --mock-bezel: #23263d;
  --mock-chrome: #25283d;

  /* ---- Elevation & shape --------------------------------------------- */
  --shadow: 0 22px 55px rgba(15, 23, 42, 0.09);
  --shadow-lift: 0 28px 70px rgba(15, 23, 42, 0.13);
  --radius: 28px;
}

/**
 * Dark. Applied by the `data-theme` attribute that boot.js stamps pre-paint,
 * with a `prefers-color-scheme` fallback so the page is still correct when
 * JavaScript never runs.
 */
:root[data-theme='dark'] {
  color-scheme: dark;

  --canvas: #080a14;
  --surface: #11152a;
  --surface-raised: #161b33;
  --surface-sunken: #0c1020;
  --hairline: #292e49;
  --hairline-strong: #2a3150;

  --ink: #f5f7ff;
  --ink-muted: #afb5c8;
  --ink-subtle: #9ba3bb;

  --brand: #8b76ff;
  --brand-pressed: #7058f0;
  --brand-fill: #7357ff;
  --brand-ink: #a99bff;
  --brand-tint: #242047;
  --brand-tint-hairline: #3c356c;
  --brand-tint-ink: #ded9ff;

  --motion: #18e3cc;
  --motion-ink: #18e3cc;
  --motion-tint: #0d2827;
  --motion-tint-hairline: #20524e;
  --motion-tint-ink: #a9ded7;

  --lime-tint: rgba(201, 255, 61, 0.14);
  --lime-tint-ink: #d7ff6e;
  --sport-orange: #ff8e5a;
  --orange-tint: rgba(255, 142, 90, 0.16);
  --orange-tint-ink: #ffa87c;
  --achievement-pink: #ff71ae;
  --pink-tint: rgba(255, 113, 174, 0.16);
  --pink-tint-ink: #ff93c2;
  --info-blue: #72a6ff;
  --blue-tint: rgba(114, 166, 255, 0.16);
  --blue-tint-ink: #93bcff;
  --danger: #ff6b62;
  --success: #31c7b2;

  --band-ink: #ffffff;
  --band-ink-muted: rgba(255, 255, 255, 0.68);
  --band-ink-subtle: rgba(255, 255, 255, 0.52);
  --band-surface: rgba(255, 255, 255, 0.06);
  --band-hairline: rgba(255, 255, 255, 0.14);
  --band-glow-brand: rgba(115, 87, 255, 0.24);
  --band-glow-motion: rgba(0, 217, 192, 0.14);
  --band-grid-line: rgba(255, 255, 255, 0.025);

  --hero-bg:
    radial-gradient(circle at 75% 42%, var(--band-glow-motion), transparent 22%),
    radial-gradient(circle at 30% 20%, var(--band-glow-brand), transparent 32%),
    #090b19;
  --organiser-bg: linear-gradient(135deg, #11142a 0%, #090b19 62%, #122c31 100%);
  --ai-bg: #090b19;
  --cta-bg: #090b19;
  --journey-bg: radial-gradient(circle at 68% 50%, rgba(0, 217, 192, 0.15), transparent 30%), #090b19;
  --india-bg: #09201f;
  --india-ink-muted: #b6cbc8;
  --india-node-surface: #111f25;
  --india-node-hairline: #25413f;
  --india-thread: #2f7d72;

  --header-ink: #ffffff;
  --header-ink-muted: rgba(255, 255, 255, 0.68);
  --header-ink-hover: #ffffff;
  --header-bg: transparent;
  --header-bg-solid: rgba(9, 11, 25, 0.88);
  --header-hairline: rgba(255, 255, 255, 0.1);
  --header-panel: #090b19;

  --btn-primary-bg: #c9ff3d;
  --btn-primary-ink: #0b0c16;
  --btn-primary-shadow: 0 14px 34px rgba(201, 255, 61, 0.16);
  --btn-quiet-bg: rgba(255, 255, 255, 0.06);
  --btn-quiet-ink: #ffffff;
  --btn-quiet-hairline: rgba(255, 255, 255, 0.22);
  --btn-quiet-shadow: none;

  --mock-canvas: #0e1224;
  --mock-surface: #161b33;
  --mock-ink: #f5f7ff;
  --mock-ink-muted: #9ba3bb;
  --mock-hairline: #2a3150;
  --mock-bezel: #2c3048;
  --mock-chrome: #202337;

  --shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.55);
}

/* No JavaScript: honour the OS preference rather than defaulting to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    color-scheme: dark;

    --canvas: #080a14;
    --surface: #11152a;
    --surface-raised: #161b33;
    --surface-sunken: #0c1020;
    --hairline: #292e49;
    --hairline-strong: #2a3150;

    --ink: #f5f7ff;
    --ink-muted: #afb5c8;
    --ink-subtle: #9ba3bb;

    --brand: #8b76ff;
    --brand-pressed: #7058f0;
    --brand-fill: #7357ff;
    --brand-ink: #a99bff;
    --brand-tint: #242047;
    --brand-tint-hairline: #3c356c;
    --brand-tint-ink: #ded9ff;

    --motion: #18e3cc;
    --motion-ink: #18e3cc;
    --motion-tint: #0d2827;
    --motion-tint-hairline: #20524e;
    --motion-tint-ink: #a9ded7;

    --lime-tint: rgba(201, 255, 61, 0.14);
    --lime-tint-ink: #d7ff6e;
    --sport-orange: #ff8e5a;
    --orange-tint: rgba(255, 142, 90, 0.16);
    --orange-tint-ink: #ffa87c;
    --achievement-pink: #ff71ae;
    --pink-tint: rgba(255, 113, 174, 0.16);
    --pink-tint-ink: #ff93c2;
    --info-blue: #72a6ff;
    --blue-tint: rgba(114, 166, 255, 0.16);
    --blue-tint-ink: #93bcff;
    --danger: #ff6b62;
    --success: #31c7b2;

    --band-ink: #ffffff;
    --band-ink-muted: rgba(255, 255, 255, 0.68);
    --band-ink-subtle: rgba(255, 255, 255, 0.52);
    --band-surface: rgba(255, 255, 255, 0.06);
    --band-hairline: rgba(255, 255, 255, 0.14);
    --band-glow-brand: rgba(115, 87, 255, 0.24);
    --band-glow-motion: rgba(0, 217, 192, 0.14);
    --band-grid-line: rgba(255, 255, 255, 0.025);

    --hero-bg:
      radial-gradient(circle at 75% 42%, var(--band-glow-motion), transparent 22%),
      radial-gradient(circle at 30% 20%, var(--band-glow-brand), transparent 32%),
      #090b19;
    --organiser-bg: linear-gradient(135deg, #11142a 0%, #090b19 62%, #122c31 100%);
    --ai-bg: #090b19;
    --cta-bg: #090b19;
    --journey-bg: radial-gradient(circle at 68% 50%, rgba(0, 217, 192, 0.15), transparent 30%), #090b19;
    --india-bg: #09201f;
    --india-ink-muted: #b6cbc8;
    --india-node-surface: #111f25;
    --india-node-hairline: #25413f;
    --india-thread: #2f7d72;

    --header-ink: #ffffff;
    --header-ink-muted: rgba(255, 255, 255, 0.68);
    --header-ink-hover: #ffffff;
    --header-bg: transparent;
    --header-bg-solid: rgba(9, 11, 25, 0.88);
    --header-hairline: rgba(255, 255, 255, 0.1);
    --header-panel: #090b19;

    --btn-primary-bg: #c9ff3d;
    --btn-primary-ink: #0b0c16;
    --btn-primary-shadow: 0 14px 34px rgba(201, 255, 61, 0.16);
    --btn-quiet-bg: rgba(255, 255, 255, 0.06);
    --btn-quiet-ink: #ffffff;
    --btn-quiet-hairline: rgba(255, 255, 255, 0.22);
    --btn-quiet-shadow: none;

    --mock-canvas: #0e1224;
    --mock-surface: #161b33;
    --mock-ink: #f5f7ff;
    --mock-ink-muted: #9ba3bb;
    --mock-hairline: #2a3150;
    --mock-bezel: #2c3048;
    --mock-chrome: #202337;

    --shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.55);
  }
}