/* Dev Manager design tokens: the only file with colour literals (tests/check-ui.py enforces it).
   Order: primitives (never used by components), then roles for light, roles for dark, then the
   scales shared by both modes. Names that existed in app.css keep their meaning (DESIGN.md).
   Contrast targets are checked in ui/kit.html; the numbers in comments are WCAG ratios. */

:root {
  /* --- Primitives -------------------------------------------------------------------------- */
  --n-0: #ffffff; --n-50: #f1f3f6; --n-100: #e9ecf0; --n-150: #e7eaee; --n-200: #dfe3e8;
  --n-250: #e0e4e9; --n-300: #b6bdc8; --n-400: #9aa3b0; --n-450: #7d8693; --n-500: #5b6370; --n-600: #4a525e; --n-900: #16181b;
  --d-0: #101114; --d-50: #16181c; --d-100: #212429; --d-150: #2a2e35; --d-200: #343941;
  --d-250: #2b2f36; --d-300: #3c424b; --d-400: #4a515b; --d-450: #68707b; --d-500: #8d95a0; --d-600: #aab1bb; --d-900: #e9ebee;
  --blue-l: #1d4ed8; --blue-hover-l: #1e40af; --blue-soft-l: #e6eefd;
  --blue-d: #6d9bff; --blue-hover-d: #86adff; --blue-soft-d: #263451; --blue-ink-d: #0f1a33;
  --green-l: #1f6b3a; --green-soft-l: #e5f4ea; --green-d: #4ccb7f; --green-soft-d: #1d3527;
  --amber-l: #9a4a07; --amber-soft-l: #fdf1e2; --amber-d: #f2a93b; --amber-soft-d: #3a2e1a;
  --red-l: #b02525; --red-soft-l: #fbe9e9; --red-d: #f07272; --red-soft-d: #3d2224;
  --violet-l: #7c3aed; --violet-d: #b48cff; --cyan-l: #0e7490; --cyan-d: #5ec4d6;

  /* --- Roles: light ------------------------------------------------------------------------ */
  --bg: var(--n-150);              /* page; card on it 1.21:1 */
  --nav: var(--n-250);
  --surface: var(--n-0);           /* card, glance box, dialog */
  --surface-raised: var(--surface);   /* what floats one step up: the confirmation (white over the scrim here) */
  --surface-2: var(--n-50);        /* inset: hover rows, chips, segmented track (1.11:1 on card) */
  --surface-3: var(--n-100);       /* raised inside an inset; never under hint text */
  --border: var(--n-300);          /* 1.89:1 on card, 1.57:1 on page */
  --border-control: var(--n-450);  /* fields, outline buttons, the strip's no-run tick: 3.68:1 on card, 3.05:1 on page */
  --border-subtle: var(--n-200);
  --text: var(--n-900);
  --muted: var(--n-600);           /* 7.9:1 on card */
  --text-hint: var(--n-500);       /* 6.06:1 on card, 5.02:1 on page */
  --faint: var(--text-hint);       /* old name, same role */
  --accent: var(--blue-l);         /* the one blue: primary fill, selected tab, toggle on, progress */
  --accent-hover: var(--blue-hover-l);
  --on-accent: var(--n-0);         /* label on the primary fill: 6.70:1 */
  --link: var(--accent);           /* text buttons and links: the same blue, 6.70:1 on card, 5.49 on page */
  --accent-soft: var(--blue-soft-l);  /* selection */
  --focus: var(--accent);
  --ok: var(--green-l);   --ok-soft: var(--green-soft-l);
  --warn: var(--amber-l); --warn-soft: var(--amber-soft-l);
  --bad: var(--red-l);    --bad-soft: var(--red-soft-l);
  --on-bad: var(--n-0);            /* label on the danger fill: 6.69:1 */
  --idle-soft: var(--surface-3);   /* a neutral chip: a fact, or work in progress (with a spinner) */
  --side-fg: var(--muted); --side-bg: var(--surface-2); --side-border: var(--border-subtle);  /* neutral on purpose */
  --seg-on: var(--surface);        /* the picked option of a segmented control */
  --knob: var(--n-0);              /* toggle knob, on --border (off) or --accent (on) */
  --meter-a: var(--n-500); --meter-b: var(--n-300);   /* data in neutral greys: blue is for action */
  --chart-1: var(--n-500); --chart-2: var(--violet-l); --chart-3: var(--cyan-l);   /* series, never state */
  --scroll-thumb: var(--n-300); --scroll-thumb-hover: var(--n-400);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);   /* card */
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .18);                                         /* menu, toast */
  --shadow-tip: 0 2px 4px rgba(0, 0, 0, .2);                                         /* tooltip: close, so it never dims what it sits next to */
  --shadow-3: 0 20px 60px rgba(0, 0, 0, .35);                                        /* dialog, side panel */
  --scrim: rgba(10, 12, 16, .45);
  --tip-bg: var(--text); --tip-fg: var(--surface); --tip-edge: var(--text);   /* tooltip: dark on a light page */
  color-scheme: light;
}

@media not all /* dark preference off in the live embed */ {
  :root {
    --bg: var(--d-0);  --nav: var(--d-50);  --surface: var(--d-100);  --surface-2: var(--d-150);  --surface-3: var(--d-200);
    --surface-raised: var(--d-150);  /* the confirmation, one step over the cards like the tooltip (#81) */
    --border: var(--d-300);  --border-subtle: var(--d-250);           /* border 1.54:1 on card, 1.86:1 on page */
    --border-control: var(--d-450);  /* 3.11:1 on card, 3.77:1 on page */
    --text: var(--d-900);  --muted: var(--d-600);  --text-hint: var(--d-500);   /* 13.0 / 7.2 / 5.14 on card */
    --accent: var(--blue-d);  --accent-hover: var(--blue-hover-d);  --on-accent: var(--blue-ink-d);   /* 6.40:1 (was white, 2.70:1) */
    --accent-soft: var(--blue-soft-d);   /* --link and --focus follow --accent: 5.77:1 on card */
    --ok: var(--green-d);   --ok-soft: var(--green-soft-d);
    --warn: var(--amber-d); --warn-soft: var(--amber-soft-d);
    --bad: var(--red-d);    --bad-soft: var(--red-soft-d);
    --on-bad: var(--blue-ink-d);     /* 6.05:1 on the dark red fill */
    --seg-on: var(--surface-3);
    --meter-a: var(--d-600); --meter-b: var(--d-450);
    --chart-1: var(--d-600); --chart-2: var(--violet-d); --chart-3: var(--cyan-d);
    --scroll-thumb: var(--d-300); --scroll-thumb-hover: var(--d-400);
    --shadow-1: none;
    --tip-bg: var(--surface-2); --tip-fg: var(--text); --tip-edge: var(--border);   /* tooltip: raised one step, never a light box (11.4:1) */
    color-scheme: dark;
  }
}

/* --- Derived roles (both modes; mixed from the roles above, so they follow the mode) -------- */
:root {
  --bad-line: color-mix(in srgb, var(--bad) 55%, var(--border));      /* a muted red line: a danger button's outline, the ErrorDetail rule (#9f5c60 dark) */
  --danger-fill: var(--bad);                                          /* the confirmation's red verb (#80): the failure hue as the app's only red fill */
  --border-control-raised: color-mix(in srgb, var(--border-control) 70%, var(--text-hint));   /* a control's edge on the raised surface: 3.19:1 dark (--border-control there is 2.72) */
  --bad-hover: color-mix(in srgb, var(--bad) 86%, var(--text));       /* a filled danger button under the pointer */
  --track-tint: color-mix(in srgb, var(--text) 14%, transparent);     /* progress track on a tinted bar */
  --chart-fill: color-mix(in srgb, var(--chart-1) 16%, transparent);  /* area under a sparkline */
}

/* --- Scales (both modes) ------------------------------------------------------------------ */
:root {
  /* spacing: everything sits on these (1-3 px stay literal for borders and optical nudges) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --gap-stack: var(--sp-4);                 /* between cards on a page and in .stack wrappers */
  --pad-card: var(--sp-4) var(--sp-5);      /* card, glance box and callout share one padding */
  --pad-card-x: var(--sp-5);
  --col-max: 1040px;
  --panel-w: 420px;                         /* side panels: guide, file view */

  /* type: title is 2 px over body; meta covers chips, hints, paths and commands */
  --fs-label: 11px;   /* uppercase nav group labels and table headers */
  --fs-meta: 12px;
  --fs-dense: 13px;   /* table cells, glance rows, small buttons */
  --fs-body: 14px;
  --fs-title: 16px;   /* card, dialog and panel titles */
  --fs-figure: 18px;  /* the big line or number in a card; under the page title's 22 */
  --fs-hero: 20px;    /* the Backup card's figure: a step over the other cards', under the title */
  --fs-page: 22px;    /* page titles only */
  /* line heights, in whole pixels so boxes below a line of text sit on the pixel grid and their
     1 px borders stay crisp (a 14 px line at 1.45 is 20.3 px, and the 0.3 adds up) */
  --lh-label: 16px; --lh-meta: 17px; --lh-dense: 19px; --lh-body: 20px; --lh-title: 21px; --lh-figure: 24px; --lh-hero: 26px; --lh-page: 28px;
  /* old names, kept as aliases */
  --fs-xs: var(--fs-meta); --fs-sm: var(--fs-meta); --fs-md: var(--fs-dense);
  --fs-lg: var(--fs-title); --fs-xl: var(--fs-figure); --fs-2xl: var(--fs-page);

  /* shape */
  --r-chip: 6px; --r-control: 8px; --r-panel: 10px; --r-card: 12px; --r-pill: 999px; --r-bar: 3px;
  --r-sm: var(--r-chip); --r-md: var(--r-control); --r-lg: var(--r-panel); --radius: var(--r-card);
  --shadow: var(--shadow-1);

  /* density */
  --ctl-h-md: 34px; --ctl-h-sm: 28px;
  --row-compact: 32px; --row-default: 44px; --row-rich: 56px;
  --row-table: 34px;       /* every one-line row of a DS.Table, whatever it holds (M68) */
  --row-table-2: 53px;     /* a DS.Table row with a second line (Repos' worktree count or tag), whatever the line holds (M79) */
  --fold-indent: 14px;     /* a fold's body under its ▸; a table in it indents its first column only (#113) */
  --row-list: 30px;        /* a master-detail list's row: Places' 18 tools fit beside the pane at 1440x900 (#118) */

  /* motion */
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 400ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-tab: 180ms;        /* a tab bar's underline slides to the picked tab */
  --dur-tab-fade: 120ms;   /* the panels crossfade, without sliding */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --dur-flash: 1200ms;     /* what a link brought into sight lets its tint go */

  /* stacking */
  --z-sticky: 5; --z-menu: 20; --z-panel: 40; --z-tip: 50; --z-dialog: 60;
  --stick-under: 0px;   /* how far down a stuck table head sits: under the job bar while it shows (app.js sets it on main) */
}