/* Design tokens: the only place raw sizes/colors should be chosen.
   Everything else in this app should reference a var(--...) from here.
   Load this before style.css. */

:root {
  /* Type scale — 7 sizes total. Previously the app had ~25 distinct
     font-size values (including drift like 12.5px, 11.5px, 13.5px) with
     no naming, so nothing signaled which size was "the" size for a given
     role. Pick from this list; don't add a new raw px value. */
  --fs-xs: 10px;    /* micro labels, timestamps, badges */
  --fs-sm: 11px;    /* secondary/meta text, dense UI rows */
  --fs-base: 12px;  /* default body/UI text — the workhorse size */
  --fs-md: 13px;    /* emphasized text, form controls */
  --fs-lg: 15px;    /* sub-headings, prominent labels */
  --fs-xl: 18px;    /* section headers */
  --fs-2xl: 20px;   /* dialog/page titles */

  /* Relative type scale — em-based, for headings/inline elements *within*
     rendered markdown, where size should track the surrounding prose's own
     font-size rather than an absolute px value. Two independent markdown
     renderers (.editor-doc for the file editor, .bubble.md for chat) had
     drifted to slightly different heading ratios (1.6/1.35/1.15 vs
     1.35/1.2/1.08) with no evident reason; unified to one scale. Likewise
     .fm-chip's .9em was a near-duplicate of .fm-key's .85em one line away. */
  --fs-rel-h1: 1.5em;
  --fs-rel-h2: 1.25em;
  --fs-rel-h3: 1.1em;
  --fs-rel-h4: 1em;
  --fs-rel-code: .92em;
  --fs-rel-sm: .85em;

  /* Spacing scale — used for padding, margin, gap. 2px base unit. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 48px;

  /* Radius scale */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default control radius */
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 20px;
  --radius-pill: 999px;
  --radius-pill-em: 2em; /* pill that should scale with its own font-size */

  /* Elevation */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(1,4,9,.6);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.5);
  --shadow-xl: 0 18px 50px rgba(0,0,0,.45);
  --shadow-drawer-r: 4px 0 24px rgba(0,0,0,.45);
  --shadow-drawer-l: -4px 0 24px rgba(0,0,0,.45); /* mirrors --shadow-drawer-r; #chat-panel's mobile drawer previously used -8px/.4 here for no evident reason — unified to match #pr-queue-sidebar/#rv-aside */

  /* Fonts — canonical stacks. --gh-mono/--gh-sans (defined in the #pr-pane
     scope further down in style.css) alias to these instead of repeating
     their own near-identical stack. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, Helvetica, Arial, sans-serif;

  /* Weight scale — already consistent in practice (only 400/500/600/700
     were ever used); named so future additions pick from here instead of
     inventing e.g. 550. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line-height scale. Unitless = scales with font-size (prose/body).
     Fixed px = a deliberate row-height for a button/chip/pill regardless
     of its font-size (so an icon or badge centers exactly). Both are
     legitimate; keep them in separate namespaces so it's clear which
     kind a given control needs. */
  --lh-solid: 1;      /* single-line icon/label, no extra leading */
  --lh-tight: 1.25;   /* headings */
  --lh-normal: 1.5;   /* default reading */
  --lh-relaxed: 1.7;  /* loose list items needing bigger tap targets */
  --lh-control-sm: 16px;
  --lh-control-md: 18px;
  --lh-control-lg: 20px;

  --transition-fast: .2s ease;

  /* z-index scale, back to front. Values encode *relative order between
     layers that can legitimately overlap*; don't insert a raw number
     between two of these without checking what it needs to sit above. */
  --z-raise: 1;          /* lift above this element's own immediate siblings only */
  --z-nc-overlay: 15;    /* Norton-Commander-style file browser: its own full-screen layer */
  --z-nc-modal: 20;      /* dialog/menu/help within that same layer */
  --z-drawer-trigger: 45;/* the fixed button that reveals an off-canvas drawer */
  --z-scrim: 50;         /* backdrop behind an open drawer */
  --z-drawer: 60;        /* the off-canvas drawer itself (sidebar / chat / queue / review aside) */
  --z-popover: 80;       /* context menus / dropdowns */
  --z-overlay-launch: 90;
  --z-overlay-login: 100;
  --z-modal: 120;
  --z-toast: 200;        /* must beat --z-modal and --z-overlay-login: a failed action inside either needs to surface */

  /* Norton-Commander-style retro skin (the #nc-* file browser, nc.js).
     Deliberately NOT theme-aware — this pane keeps its DOS blue/cyan look
     in both light and dark mode, so these are their own constants rather
     than aliases of --bg/--txt/etc, even where the values happen to match
     the dark theme today. Previously these were ~10 hardcoded hex literals
     repeated across the ruleset with no single place to change the skin. */
  --nc-navy: #0000A8;
  --nc-navy-input: #000082;
  --nc-cyan: #00A8A8;
  --nc-fg: #54FCFC;        /* primary text (bright cyan) */
  --nc-fg-strong: #FCFCFC; /* headers, titles, hover state */
  --nc-yellow: #FCFC54;    /* tagged items */
  --nc-on-cyan: #000;      /* text sitting on a cyan-background control */
  --nc-black: #050505;     /* near-black output-overlay background */
  --nc-dim: #8b93a3;
  --nc-body-fg: #d7dbe3;

  /* Backdrop behind any drawer/dialog that floats over real page content.
     #launch-overlay previously used rgba(0,0,0,.5) here for no evident
     reason while #scrim/.rside-scrim used .45 — same role, same skin,
     now one value. (#pr-modal-root's own darker scrim is intentionally
     separate — see --gh-scrim next to the rest of its Primer skin.) */
  --scrim-bg: rgba(0,0,0,.45);

  /* Text sitting directly on a saturated fill (accent/success/etc. background)
     rather than the page background — same two values regardless of skin or
     theme, so unlike --bg/--txt these don't need light/dark variants. */
  --on-accent: #fff;
  --on-accent-dark: #1a1108;

  /* ATS-restyle mockup (docs/web-bash/mockups/ats-style-mockup.html) — layout
     trio for the new dashboard-style screens: gutter between cards, card's
     own padding, page-edge padding. Same value in both themes (unlike the
     mockup's colour tokens, which vary by theme and so live in style.css's
     :root/dark and :root[data-theme="light"] blocks, next to the app's other
     theme-varying tokens), so these stay here. */
  --gut: 16px;
  --pad: 18px;
  --pagepad: 20px;
}