/* tokens.css: the house default. Every colour, size, radius, shadow and time a screen uses is here
   and nowhere else. Change the values for a brand; keep the names, the counts and the rules.

   Rules the values encode (each one came from a screen that was called slop):
   - White ground, near-black ink, greys that pass 4.5:1, one colour for state, spent once per view.
   - Five type steps, not thirteen. Neighbouring steps differ by at least 1.2x, or they read as a mistake.
   - Three radii that nest (inner = outer - padding), plus a dot and a pill.
   - Shadows are soft and layered, a 1px ring first. Never a hard offset, never a glow.
   - Motion answers a state change and is over in 90 to 200ms. Reduced motion is 1ms. */

:root {
  color-scheme: light;

  /* Ground and structure */
  --ground: #ffffff;
  --panel: #fbfbfa;          /* sidebars and window bars: a breath off white, so content reads as the page */
  --hover: #f6f5f2;
  --selected: #f0efeb;       /* one step darker than hover */
  --border: #ecebe8;         /* hairline */
  --border-strong: #dfddd8;  /* control outline */

  /* Ink */
  --text: #111318;
  --text-2: #4a4f5b;
  --muted: #6c707b;          /* the lightest grey that still passes 4.5:1 on --panel. #8a8e97 measured 3.4:1 and failed every caption */
  --faint: #a4a7ae;          /* never text: icons, dots, tracks */

  /* State: one colour, spent once per view (live, yours, the focus ring) */
  --state: #1f6f6a;
  --state-soft: rgb(31 111 106 / 14%);
  --danger: #b4502f;         /* stopped, refused. Deepened until it passes 4.5:1; the illustration's orange is not the UI's */
  --warn: #8f6712;

  --solid: #111318;          /* the primary button and the toast */
  --solid-hover: #262a33;
  --on-solid: #ffffff;
  --scrim: rgb(17 19 24 / 22%);

  /* Type: five steps. A sixth needs a written reason. */
  --font-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace; /* deslop-ignore 34: mono for a key cap or an id, nothing else */
  --step-display: 40px;  --lh-display: 44px;  --tr-display: -0.035em;  /* one per screen at most */
  --step-title: 24px;    --lh-title: 30px;    --tr-title: -0.025em;
  --step-body: 16px;     --lh-body: 25px;
  --step-row: 14px;      --lh-row: 21px;      /* list rows, controls, nav */
  --step-small: 12px;    --lh-small: 17px;    /* chrome only: a time, a count, a label on a track */
  --weight-body: 400; --weight-strong: 500; --weight-title: 600; /* nothing heavier */

  /* Space: 4px base, used unevenly on purpose (space by relationship, not by token) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --measure: 68ch;

  /* Sizes */
  --control-lg: 44px; --control-md: 38px; --control-sm: 32px;
  --row-nav: 36px; --row-list: 52px; --row-table: 48px;
  --tap: 44px;               /* anything a thumb must hit */
  --side: 248px;             /* sidebar */

  /* Radii that nest: a key cap inside a button inside a card */
  --radius-sm: 7px; --radius: 10px; --radius-lg: 14px;
  --radius-round: 50%;       /* a dot, an avatar, a radio */
  --radius-pill: 999px;      /* a track or a count; clamped to half the short side, so one value fits every height */

  /* Shadows: ring, contact, ambient. The big layer has negative spread so it never grows wider than the element. */
  --shadow-sm: 0 1px 2px rgb(17 19 24 / 6%);
  --shadow: 0 0 0 1px rgb(17 19 24 / 5%), 0 1px 2px rgb(17 19 24 / 4%), 0 8px 24px -8px rgb(17 19 24 / 10%);
  --shadow-lg: 0 0 0 1px rgb(17 19 24 / 7%), 0 2px 4px rgb(17 19 24 / 4%), 0 24px 48px -12px rgb(17 19 24 / 16%);

  /* Motion: a closed list. A new duration is added here with the state it answers, or not at all. */
  --motion: 150ms ease-out;                              /* hover, focus, a state change */
  --motion-press: 90ms ease;                             /* press: scale(.97) */
  --motion-settle: 200ms cubic-bezier(0.2, 0, 0.38, 0.9); /* a new thing settles in where it will stay */
  --motion-exit: 150ms cubic-bezier(0.2, 0, 1, 0.9);     /* leaving for good speeds up */
  --motion-bar: 400ms ease-out;                          /* a bar fills once, never on load */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e0f12; --panel: #131418; --hover: #1a1c21; --selected: #22252b;
  --border: #23262c; --border-strong: #30343b;
  --text: #ecedf0; --text-2: #b6bac2; --muted: #8e929b; --faint: #5d616a;
  --state: #4fb3a8; --state-soft: rgb(79 179 168 / 18%);  /* lifted until it reads on ink */
  --danger: #e08a6b; --warn: #dda63c;
  --solid: #ecedf0; --solid-hover: #ffffff; --on-solid: #0e0f12;
  --scrim: rgb(0 0 0 / 50%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow: 0 0 0 1px rgb(255 255 255 / 6%), 0 8px 24px -8px rgb(0 0 0 / 60%);
  --shadow-lg: 0 0 0 1px rgb(255 255 255 / 8%), 0 24px 48px -12px rgb(0 0 0 / 70%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 1ms linear; --motion-press: 1ms linear; --motion-settle: 1ms linear; --motion-exit: 1ms linear; --motion-bar: 1ms linear; }
}