/*
 * tokens.css — the single source of truth for colour, space, type scale,
 * radii, motion and elevation. Nothing anywhere else in the site hardcodes a
 * hex value; every colour resolves to a token defined here.
 *
 * Themes: light is the base on bare :root. Dark is applied when the OS asks
 * for it (unless the visitor forced light) and when the visitor forces dark.
 * Body text clears 4.5:1 contrast against its background in both themes.
 */

:root {
  /* ---- Neutral ramp (light) ------------------------------------------- */
  --c-bg:            #fbfbfd;   /* page ground            */
  --c-bg-elev:       #f2f2f6;   /* recessed panels        */
  --c-surface:       #ffffff;   /* cards, raised surfaces */
  --c-surface-2:     #f7f7fa;   /* nested surfaces        */
  --c-line:          rgba(15, 15, 20, 0.10);  /* hairlines */
  --c-line-strong:   rgba(15, 15, 20, 0.18);

  --c-text:          #16161c;   /* primary text  ~15:1    */
  --c-text-dim:      #4a4a55;   /* secondary     ~7.5:1   */
  --c-text-mute:     #6d6d78;   /* tertiary      ~4.7:1   */

  /* ---- Brand + signal ------------------------------------------------- */
  --c-accent:        #2f5cff;   /* Summaverick blue       */
  --c-accent-press:  #234bdb;
  --c-accent-soft:   rgba(47, 92, 255, 0.10);
  --c-on-accent:     #ffffff;

  --c-ok:            #0f8f4d;   /* verified / pass        */
  --c-ok-soft:       rgba(15, 143, 77, 0.12);
  --c-bad:           #d23842;   /* failed / blocked       */
  --c-bad-soft:      rgba(210, 56, 66, 0.12);
  --c-warn:          #b8791a;   /* caution                */
  --c-warn-soft:     rgba(184, 121, 26, 0.12);

  /* Retrieval-layer identity (scene 3). */
  --c-layer-1:       #2f5cff;
  --c-layer-2:       #7a4dff;
  --c-layer-3:       #6d6d78;   /* dimmed, off by default */

  /* ---- Type ----------------------------------------------------------- */
  --font-sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", "JetBrains Mono",
    "Cascadia Code", Menlo, Consolas, monospace;

  /* Fluid scale. Steps stay proportional across the viewport range. */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1.0rem,  0.96rem + 0.2vw,  1.12rem);   /* body ~17-18px */
  --step-1:  clamp(1.2rem,  1.11rem + 0.44vw, 1.5rem);
  --step-2:  clamp(1.5rem,  1.32rem + 0.9vw,  2.1rem);
  --step-3:  clamp(1.9rem,  1.55rem + 1.7vw,  3.0rem);
  --step-4:  clamp(2.4rem,  1.8rem  + 3.0vw,  4.2rem);
  --step-5:  clamp(3.0rem,  2.0rem  + 5.0vw,  6.0rem);    /* hero display  */

  --leading-tight:  1.04;
  --leading-snug:   1.22;
  --leading-normal: 1.55;
  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-wide:  0.06em;

  /* ---- Space (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;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-12: 12rem;

  --measure: 68ch;                 /* readable text column */
  --container: 76rem;              /* page max width       */

  /* ---- Radii ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(15, 15, 20, 0.06),
              0 1px 1px rgba(15, 15, 20, 0.04);
  --shadow-2: 0 6px 20px rgba(15, 15, 20, 0.08),
              0 2px 6px rgba(15, 15, 20, 0.05);
  --shadow-3: 0 20px 60px rgba(15, 15, 20, 0.14),
              0 6px 18px rgba(15, 15, 20, 0.08);

  /* ---- Motion --------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 460ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* settle, Apple-ish     */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);    /* emphasised reveal     */

  /* ---- Focus ---------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);

  color-scheme: light;
}

/* Dark — OS-driven, unless the visitor forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #0a0a0d;
    --c-bg-elev:     #101015;
    --c-surface:     #131319;
    --c-surface-2:   #1a1a22;
    --c-line:        rgba(255, 255, 255, 0.10);
    --c-line-strong: rgba(255, 255, 255, 0.20);

    --c-text:        #f4f4f7;
    --c-text-dim:    #b6b6c2;
    --c-text-mute:   #8b8b98;

    --c-accent:      #6d8cff;
    --c-accent-press:#8aa2ff;
    --c-accent-soft: rgba(109, 140, 255, 0.16);
    --c-on-accent:   #0a0a0d;

    --c-ok:          #33cc7a;
    --c-ok-soft:     rgba(51, 204, 122, 0.16);
    --c-bad:         #ff6069;
    --c-bad-soft:    rgba(255, 96, 105, 0.16);
    --c-warn:        #f0b13a;
    --c-warn-soft:   rgba(240, 177, 58, 0.16);

    --c-layer-1:     #6d8cff;
    --c-layer-2:     #a98bff;
    --c-layer-3:     #8b8b98;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, 0.6);

    --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);

    color-scheme: dark;
  }
}

/* Dark — visitor forced it (wins in both directions). */
:root[data-theme="dark"] {
  --c-bg:          #0a0a0d;
  --c-bg-elev:     #101015;
  --c-surface:     #131319;
  --c-surface-2:   #1a1a22;
  --c-line:        rgba(255, 255, 255, 0.10);
  --c-line-strong: rgba(255, 255, 255, 0.20);

  --c-text:        #f4f4f7;
  --c-text-dim:    #b6b6c2;
  --c-text-mute:   #8b8b98;

  --c-accent:      #6d8cff;
  --c-accent-press:#8aa2ff;
  --c-accent-soft: rgba(109, 140, 255, 0.16);
  --c-on-accent:   #0a0a0d;

  --c-ok:          #33cc7a;
  --c-ok-soft:     rgba(51, 204, 122, 0.16);
  --c-bad:         #ff6069;
  --c-bad-soft:    rgba(255, 96, 105, 0.16);
  --c-warn:        #f0b13a;
  --c-warn-soft:   rgba(240, 177, 58, 0.16);

  --c-layer-1:     #6d8cff;
  --c-layer-2:     #a98bff;
  --c-layer-3:     #8b8b98;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 24px 70px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}