/* ============================================================================
   tokens.css — "Daybreak" design tokens. SINGLE SOURCE OF TRUTH.

   Load this FIRST, before any other stylesheet.
   Never hardcode a colour, radius, easing, or font that exists here.

   Themes:
     default              light
     [data-theme="dark"]  dark, forced
     [data-theme="light"] light, forced
     prefers-color-scheme honoured when no data-theme is set

   All colour is OKLCH. No pure #000 / #fff anywhere: every neutral carries a
   trace of the brand hue (chroma 0.004-0.015) so surfaces feel related.
============================================================================ */

:root {
  color-scheme: light;

  /* ---- Surfaces ------------------------------------------------------- */
  --paper: oklch(0.965 0.004 250);      /* page base */
  --paper-2: oklch(0.94 0.006 250);     /* alternate band / gradient end */

  /* ---- Text ----------------------------------------------------------- */
  --ink: oklch(0.27 0.02 262);          /* headings, primary */
  --ink-soft: oklch(0.44 0.015 262);    /* body */
  --ink-faint: oklch(0.60 0.01 262);    /* meta, hints, axis labels */

  /* ---- Accent. ONE primary. Supports are deliberately muted. --------- */
  --sky: oklch(0.62 0.13 250);          /* primary action, links, nodes */
  --sky-deep: oklch(0.52 0.14 255);     /* hover, eyebrows, emphasis */
  --bloom: oklch(0.58 0.07 285);        /* secondary, sparing */
  --sun: oklch(0.80 0.03 90);           /* highlight, sparing */
  --mint: oklch(0.78 0.04 175);         /* success */
  --danger: oklch(0.58 0.19 25);        /* validation errors */

  /* ---- Landing green. The "act on this" accent, reused from the landing
     opener's aurora dot field (rgb 91,233,162 ≈ oklch(0.84 0.16 158)). Kept
     as a family so --sky can stay the calmer secondary. Light theme darkens
     it so text/marks clear 4.5:1 on paper. --------------------------------- */
  --green: oklch(0.55 0.15 158);          /* primary action, key figures, selected mark */
  --green-strong: oklch(0.47 0.15 160);   /* hover / emphasis */
  --green-ink: oklch(0.99 0.02 158);      /* text/icon ON a green fill */

  /* ---- Liquid glass material ------------------------------------------ */
  --glass-fill: oklch(0.99 0.003 250 / 0.5);
  --glass-fill-strong: oklch(0.99 0.003 250 / 0.7);
  --glass-stroke: oklch(1 0 0 / 0.65);
  --glass-shadow: oklch(0.42 0.01 262 / 0.2);
  --glass-inner-light: oklch(1 0 0 / 0.7);

  /* ---- Hairlines ------------------------------------------------------ */
  --rule: oklch(0.42 0.01 262 / 0.14);

  /* ---- Radii ---------------------------------------------------------- */
  --r-sm: 0.9rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;

  /* ---- Motion --------------------------------------------------------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;
  --dur-reveal: 1000ms;

  /* ---- Type ----------------------------------------------------------- */
  --ff-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --ff-body: "Geist", system-ui, sans-serif;

  /* Editorial scale. The jump from eyebrow to display is intentional and
     load-bearing: it is what separates this from template layouts. */
  --fs-eyebrow: 0.7rem;
  --tr-eyebrow: 0.24em;
  --fs-body: 1rem;
  --fs-lede: clamp(1.02rem, 1.45vw, 1.24rem);
  --fs-h3: clamp(1.35rem, 2.5vw, 2rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.5rem);
  --fs-display: clamp(2.9rem, 7.4vw, 6.1rem);
  --tr-display: -0.045em;

  --measure: 68ch;      /* max body line length */
  --shell-max: 1320px;
  --shell-x: clamp(1.15rem, 5vw, 5rem);
}

/* ---------------------------------------------------------------------------
   Dark. Same structure, same metrics. Surfaces darken, accents brighten to
   hold contrast, glass inverts (dark translucent fill, brighter rim).
--------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: oklch(0.19 0.012 260);
  --paper-2: oklch(0.155 0.012 262);

  --ink: oklch(0.96 0.006 250);
  --ink-soft: oklch(0.80 0.008 252);
  --ink-faint: oklch(0.62 0.008 255);

  --sky: oklch(0.72 0.14 248);
  --sky-deep: oklch(0.82 0.11 245);
  --bloom: oklch(0.72 0.09 288);
  --sun: oklch(0.86 0.05 90);
  --mint: oklch(0.82 0.06 175);
  --danger: oklch(0.68 0.18 25);

  /* Landing green, bright on dark so it carries the action / selection. */
  --green: oklch(0.84 0.16 158);
  --green-strong: oklch(0.90 0.15 160);
  --green-ink: oklch(0.22 0.05 160);

  --glass-fill: oklch(0.30 0.015 258 / 0.45);
  --glass-fill-strong: oklch(0.33 0.015 258 / 0.62);
  --glass-stroke: oklch(1 0 0 / 0.16);
  --glass-shadow: oklch(0.06 0.01 260 / 0.55);
  --glass-inner-light: oklch(1 0 0 / 0.12);

  --rule: oklch(1 0 0 / 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --paper: oklch(0.19 0.012 260);
    --paper-2: oklch(0.155 0.012 262);

    --ink: oklch(0.96 0.006 250);
    --ink-soft: oklch(0.80 0.008 252);
    --ink-faint: oklch(0.62 0.008 255);

    --sky: oklch(0.72 0.14 248);
    --sky-deep: oklch(0.82 0.11 245);
    --bloom: oklch(0.72 0.09 288);
    --sun: oklch(0.86 0.05 90);
    --mint: oklch(0.82 0.06 175);
    --danger: oklch(0.68 0.18 25);

    --green: oklch(0.84 0.16 158);
    --green-strong: oklch(0.90 0.15 160);
    --green-ink: oklch(0.22 0.05 160);

    --glass-fill: oklch(0.30 0.015 258 / 0.45);
    --glass-fill-strong: oklch(0.33 0.015 258 / 0.62);
    --glass-stroke: oklch(1 0 0 / 0.16);
    --glass-shadow: oklch(0.06 0.01 260 / 0.55);
    --glass-inner-light: oklch(1 0 0 / 0.12);

    --rule: oklch(1 0 0 / 0.12);
  }
}