/* ═════════════════════════════════════════════════════════════════════════
   Design tokens. The ONLY place a colour, size, radius, shadow or duration
   is written down; components.css and every template consume these by name.

   Seeded from the harvested Nocturne system on the app-shell row and completed
   on `Design tokens + DESIGN.md`: every category the row names, both themes,
   retuned where the axe run found the light palette under AA. docs/DESIGN.md
   is the one-page guide beside it.

   Light and dark follow the OS. The system is designed dark; light is the
   same structure with the neutral ramp turned over and the accent walked
   down to where it has contrast on white.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces and text */
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-row-rule: color-mix(in srgb, #e9e9ed 8%, transparent);

  /* accent */
  --color-accent: #9184d9;
  --color-accent-text: #d2cefd;
  --color-link: #d2cefd;
  --color-link-hover: #e7e5fe;

  /* tonal ramps — one shared lightness scale */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  /* semantic text roles */
  --color-muted: var(--color-neutral-500);
  --color-dim: var(--color-neutral-400);
  --color-placeholder: var(--color-neutral-500);  /* 4.5:1+ on the dark surface */

  /* status — always paired with words, never colour alone */
  --ok: oklch(0.78 0.1 160);
  --ok-text: oklch(0.82 0.1 160);
  --warn: oklch(0.82 0.11 90);
  --warn-text: oklch(0.85 0.1 90);
  --bad: oklch(0.72 0.13 25);
  --bad-text: oklch(0.78 0.12 25);

  /* type */
  --font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --text-2xs: 0.7rem;
  --text-xs: 0.78rem;
  --text-sm: 0.84rem;
  --text-md: 0.95rem;
  --text-lg: 1.1rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.65rem;
  --text-display: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem); /* the landing headline only */
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* space — a 0.25rem step */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* measure */
  --measure-narrow: 54rem;
  --measure-page: 68rem;
  --measure-wide: 74rem;
  --measure-dialog: 41rem;
  --fade: 3rem;
  --tap: 2.25rem;
  --sidebar-width: 15rem;  /* the signed-in shell's left rail */
  --sidebar-rail: 4.25rem; /* the same sidebar, collapsed to its icons */
  --sidebar-now: var(--sidebar-width); /* its width right now: the shell sets it */
  --measure-run: 120rem;   /* the run page's cap on very wide screens */
  /* the tick rail: a slim strip, a sideways pill per stage, a dash per step */
  --tick-rail-width: 2.75rem;
  --tick-stage-width: 2rem;
  --tick-stage-height: 0.625rem;
  --tick-step-width: 1rem;
  --tick-step-width-current: 1.5rem;
  --tick-name-stage-height: 0.5rem;
  --tick-step-height: 0.25rem;
  --tick-hatch: 0.1875rem;
  --tick-stage-row: 1.375rem;
  --tick-step-row: 0.875rem;
  --tick-stage-row-touch: 1.75rem;
  --tick-step-row-touch: 1.5rem;
  --tick-name-row: 1.75rem;
  --tick-panel-width: 19rem;
  --tick-close-delay: 160ms;
  --tile-min: 16rem;       /* the narrowest a dashboard tile gets before the grid drops a column */
  --tile-height: 11rem;    /* tiles in a row line up whatever their copy */
  --viewport-height: 100dvh; /* the visible viewport, mobile browser bars excluded */

  /* radius, elevation */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --shadow-sm: 0 0 0 1px var(--color-neutral-800);
  --shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px var(--color-neutral-700), 0 16px 40px rgba(0, 0, 0, 0.65);
  --focus-ring: 2px solid var(--color-accent);
  --glow: 0.625rem;
  --blur: 0.2rem;

  /* motion */
  --motion-fast: 120ms;
  --motion-slow: 900ms;
  --motion-spin: 800ms;  /* one turn of the busy ring (busy.js) */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  /* The landing illustration: one slow loop, every move softly eased at both
     ends, so it reads as calm rather than busy. Every animated part shares
     the loop length, which is what keeps the storyboard in step. */
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --landing-loop: 24s;
  --landing-art-wide: 60rem;  /* the landscape storyboard's widest - one user unit per pixel */
  --landing-art-tall: 24rem;  /* the portrait storyboard's widest, on a narrow screen */
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f4f5fa;
    --color-surface: #ffffff;
    --color-text: #1b1d29;
    --color-divider: color-mix(in srgb, #1b1d29 14%, transparent);
    --color-row-rule: color-mix(in srgb, #1b1d29 8%, transparent);

    --color-accent: #6154a8;
    --color-accent-text: #55498a;
    --color-link: #55498a;
    --color-link-hover: #423a6a;

    --color-neutral-100: #23252e;
    --color-neutral-200: #32353f;
    --color-neutral-300: #464a56;
    --color-neutral-400: #5a5f6d;
    --color-neutral-500: #6f7484;
    --color-neutral-600: #8d92a1;
    --color-neutral-700: #c3c7d3;
    --color-neutral-800: #e0e3ec;
    --color-neutral-900: #eff1f7;

    --color-accent-100: #2b2741;
    --color-accent-200: #423a6a;
    --color-accent-300: #55498a;
    --color-accent-400: #6154a8;
    --color-accent-500: #796cbf;
    --color-accent-600: #968ae0;
    --color-accent-700: #b5abfc;
    --color-accent-800: #e7e5fe;
    --color-accent-900: #f5f4ff;

    --ok: oklch(0.58 0.13 160);
    --ok-text: oklch(0.5 0.12 160);
    --warn: oklch(0.68 0.14 72);
    --warn-text: oklch(0.46 0.12 68);
    --bad: oklch(0.58 0.18 25);
    --bad-text: oklch(0.52 0.18 25);

    /* Muted text on the light surfaces: neutral-500 reads at ~4.3:1 on the page
       background, under AA. The axe run caught it; neutral-400 clears 4.5:1. */
    --color-muted: var(--color-neutral-400);
    --color-dim: var(--color-neutral-300);
    --color-placeholder: var(--color-neutral-400);  /* the light ramp inverts; 600 would be 2.85:1 */

    --shadow-md: 0 0 0 1px var(--color-neutral-800), 0 6px 18px rgba(27, 29, 41, 0.09);
    --shadow-lg: 0 0 0 1px var(--color-neutral-800), 0 16px 40px rgba(27, 29, 41, 0.16);
  }
}