/* zanbur-ui tokens. One set of custom properties for every page on zanbur.tech.

   Two families live here, and they are both needed:
   - THE SHEET: the drawing a page shows, as paper on a desk drawn in near-black ink.
     Values from projects/cnc-master/src/components/cad/theme.ts (the hub copies them).
   - THE CHROME: the app around the drawing (top bar, panels, buttons, inputs).
     Values from projects/cnc-master/src/styles/global.css.

   Colour is never decoration. Ink draws everything; blue (--dim) is the draughtsman's own marks
   and links; orange (--hot) means the action is here; red (--alarm) means trouble; green
   (--good, --good-ink) means healthy; amber (--warn) means worth watching.

   Dark mode, three ways (later rules win, so the order below matters):
   1. the system asks for dark and the page has not set data-theme="light";
   2. <html data-theme="dark"> (chrome and sheet);
   3. <html data-paper="dark"> darkens the sheet only (Layer Load's existing toggle);
      <html data-paper="white"> keeps the sheet white even when 1 or 2 apply. */

:root {
  color-scheme: light;

  /* ---- the sheet ---- */
  --paper: #ffffff;
  --desk: #e9edf3;
  --ink: #1a2330;
  --ink-light: #5d6875;  /* 2026-10-15: from #6b7785, so small grey lettering reads at 4.5:1 on the strip and the sections too */
  --ink-faint: rgba(26, 35, 48, 0.32);
  --rule: rgba(26, 35, 48, 0.18);
  --dim: #265eba;   /* dimensions, leaders, links: added by the draughtsman. 2026-10-18: from #2f6fd6 (4.81:1, 4.36:1 on a section) to 6.2:1 on paper, 5.4:1 on a tinted stage band (UI audit 2026-10-18, S3) */
  --hot: #ff6a1a;   /* the action is here */
  --alarm: #e0304a; /* trouble */
  --good: #12a35a;  /* healthy */
  --good-ink: #0b7a42; /* green lettering (theme.ts and Layer Load use the name): 2026-10-18 from #12a35a (3.3:1) to 5.4:1 on paper; --good stays the green of marks and fills */
  --warn-ink: #8f5a00; /* amber lettering (a value, a word, a verdict worth watching): 5.8:1 on paper, 5.2:1 on a section; --warn (2.5:1) is for marks and fills only (UI audit 2026-10-18) */
  --alarm-ink: #c4223b; /* red lettering: 5.8:1 on paper; --alarm stays the red of marks and lines */
  --warn: #e0940a;  /* worth watching */
  --fill-uncut: rgba(10, 132, 255, 0.22);
  --fill-removed: rgba(255, 106, 26, 0.14);
  --fill-section: #f1f4f9;
  --fill-ghost: rgba(255, 255, 255, 0.68);

  /* pens, in screen pixels (theme.ts PEN) */
  --pen-object: 1.1px;
  --pen-thin: 0.6px;
  --pen-dim: 0.7px;
  --pen-border: 1.6px;
  --pen-faint: 0.45px;

  /* ---- the chrome ---- */
  --bg: #f4f6f9;
  --bg2: #eaeef3;
  --panel: #ffffff;
  --control: #ffffff; /* the face of a button, select or input */
  --line: #e3e8ee;
  --line-strong: #cbd4df;
  --text: #0f1721;
  --text-dim: #4a5565;
  --muted: #7b8797;
  --accent: #0a84ff;
  --accent-dim: rgba(10, 132, 255, 0.1);
  --accent2: #ff6a1a;
  --accent2-dim: rgba(255, 106, 26, 0.12);
  --brand: #edb92c;  /* the bee's yellow, as in the videos */
  --on-hot: #141b25; /* text on an orange fill: dark ink (5.6:1 on --hot; white was 2.9:1), the orange itself unchanged */

  /* the rating ramp (Chip Load's assessment cards). Chip Load calls the second step --good;
     here it is --rate-good, because --good is the sheet's healthy green. */
  --ideal: #12a35a;
  --rate-good: #63a319;
  --caution: #e0940a;
  --danger: #e0304a;
  --ideal-dim: rgba(18, 163, 90, 0.12);
  --good-dim: rgba(99, 163, 25, 0.12);
  --caution-dim: rgba(224, 148, 10, 0.14);
  --danger-dim: rgba(224, 48, 74, 0.12);

  /* ---- type ---- */
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Roboto Mono', monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: var(--mono);
  --font-sans: var(--sans);

  /* every chrome size comes from here; --fs-scale is the one knob, turned up on wide screens */
  --fs-scale: 1;
  --fs-micro: calc(10.5px * var(--fs-scale)); /* rail keys, title-block keys, zone letters */
  --fs-xs: calc(11.5px * var(--fs-scale));    /* units, meta, pills, table headers */
  --fs-sm: calc(13px * var(--fs-scale));      /* labels, inputs, buttons */
  --fs-base: calc(14px * var(--fs-scale));    /* body copy */
  --fs-md: calc(15.5px * var(--fs-scale));    /* card and section headings */
  --fs-lg: calc(19px * var(--fs-scale));      /* page titles */
  --fs-xl: calc(23px * var(--fs-scale));      /* a verdict score */
  --fs-2xl: calc(28px * var(--fs-scale));     /* hero numbers */

  /* lettering printed on a drawing (theme.ts PEN.text*); not scaled with the chrome */
  --type-normal: 10.5px;
  --type-small: 9.5px;
  --type-tiny: 7.6px;

  /* ---- space and size ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --gutter: 16px;   /* side gutter of the chrome; 20px from 980px up */
  --tap: 40px;      /* smallest tap target */
  --topbar: 56px !important; /* the bar is the same height on every page (audit S8): a page cannot set its own */
  --input-col: 420px;
  --sheet: 1120px;  /* the hub's sheet width */

  --r-0: 0;         /* anything drawn on the sheet is square */
  --r-sm: 4px;
  --r-md: 8px;      /* buttons, inputs, list rows */
  --r-lg: 10px;     /* cards */
  --radius: 14px;   /* Chip Load's large panels */

  --shadow: 0 1px 2px rgba(15, 23, 33, 0.04), 0 8px 24px rgba(15, 23, 33, 0.06);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.13);
  --shadow-sheet: 0 1px 2px rgba(10, 16, 24, 0.07), 0 18px 46px rgba(10, 16, 24, 0.12);
  --shadow-sheet-app: 0 1px 2px rgba(15, 23, 33, 0.08), 0 8px 22px rgba(15, 23, 33, 0.14);
  --shadow-dialog: 0 18px 46px rgba(8, 12, 18, 0.34);
}

@media (min-width: 980px) { :root { --gutter: 20px; } }
@media (min-width: 1728px) { :root { --fs-scale: 1.07; --input-col: 452px; --sheet: 1240px; } }
@media (min-width: 2200px) { :root { --fs-scale: 1.14; --input-col: 486px; --sheet: 1360px; } }
@media (min-width: 3000px) { :root { --fs-scale: 1.22; --input-col: 520px; --sheet: 1480px; } }

/* ---- dark: the system asks for it ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1117;
    --bg2: #161b22;
    --panel: #11161d;
    --control: #161b22;
    --line: #232b36;
    --line-strong: #313b48;
    --text: #e7edf5;
    --text-dim: #b3bdca;
    --muted: #7d8b9b;
    --accent: #5aa2ff;
    --accent-dim: rgba(90, 162, 255, 0.16);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 46px rgba(0, 0, 0, 0.45);
    --shadow-sheet-app: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.45);
  }
  :root:not([data-theme="light"]):not([data-paper="white"]) {
    --paper: #121820;
    --desk: #080b10;
    --ink: #e7edf5;
    --ink-light: #8b99aa;
    --ink-faint: rgba(231, 237, 245, 0.28);
    --rule: rgba(231, 237, 245, 0.16);
    --dim: #5aa2ff;
    --hot: #ff8f45;
    --alarm: #ff5c72;
    --good: #3ecf7d;
    --good-ink: #3ecf7d;
    --warn: #f0b03a;
    --warn-ink: #f0b03a;
    --alarm-ink: #ff5c72;
    --fill-uncut: rgba(90, 162, 255, 0.26);
    --fill-removed: rgba(255, 143, 69, 0.18);
    --fill-section: #1b232e;
    --fill-ghost: rgba(18, 24, 32, 0.66);
  }
}

/* ---- dark: the page says so ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --bg2: #161b22;
  --panel: #11161d;
  --control: #161b22;
  --line: #232b36;
  --line-strong: #313b48;
  --text: #e7edf5;
  --text-dim: #b3bdca;
  --muted: #7d8b9b;
  --accent: #5aa2ff;
  --accent-dim: rgba(90, 162, 255, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 46px rgba(0, 0, 0, 0.45);
  --shadow-sheet-app: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ---- the dark sheet: with data-theme="dark", or alone with data-paper="dark" ---- */
:root[data-theme="dark"]:not([data-paper="white"]),
:root[data-paper="dark"] {
  --paper: #121820;
  --desk: #080b10;
  --ink: #e7edf5;
  --ink-light: #8b99aa;
  --ink-faint: rgba(231, 237, 245, 0.28);
  --rule: rgba(231, 237, 245, 0.16);
  --dim: #5aa2ff;
  --hot: #ff8f45;
  --alarm: #ff5c72;
  --good: #3ecf7d;
  --good-ink: #3ecf7d;
  --warn: #f0b03a;
  --warn-ink: #f0b03a;
  --alarm-ink: #ff5c72;
  --fill-uncut: rgba(90, 162, 255, 0.26);
  --fill-removed: rgba(255, 143, 69, 0.18);
  --fill-section: #1b232e;
  --fill-ghost: rgba(18, 24, 32, 0.66);
}

/* ---- the kit's icons (icons.js, ZuIcons; icons/README.md) ----
   Small CAD drawings in the sheets' pens: the part in the lettering's own colour (so an icon follows a tab's hover and the
   dark sheet), hidden and centre lines dashed, the action in --hot. 1em square unless the place it sits says otherwise. */
.zu-icon { width: 1em; height: 1em; flex: none; overflow: visible; vertical-align: -0.15em; fill: none; stroke: none; }
.zu-icon .zu-i-ink, .zu-icon .zu-i-thin, .zu-icon .zu-i-dash, .zu-icon .zu-i-hot { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.zu-icon .zu-i-ink { stroke-width: 1.5; }
.zu-icon .zu-i-thin { stroke-width: 1; opacity: 0.72; }
.zu-icon .zu-i-dash { stroke-width: 1; stroke-dasharray: 2 1.6; stroke-linecap: butt; opacity: 0.72; }
.zu-icon .zu-i-hot { stroke-width: 1.5; stroke: var(--hot, #ff6a1a); }
.zu-icon .zu-i-fill { fill: currentColor; stroke: none; }
.zu-icon .zu-i-hotfill { fill: var(--hot, #ff6a1a); stroke: none; }