/* Datum brand — fonts and the three themes, shared by Datum and Datum Shop Connect.
 *
 * Served by the `brand` blueprint (brand/__init__.py) at /brand/theme.css in BOTH apps.
 * Each app's own stylesheet (ui/static/datum.css, floor/static/floor.css) is loaded
 * AFTER this one and consumes the tokens — density, layout and hit targets stay per app,
 * because a desk board and a gloved-hand tablet are opposite problems. What they share is
 * the thing that must never differ between them: which colour means what.
 *
 * 🔑 NO COLOUR LITERAL BELONGS IN EITHER APP STYLESHEET. Before 2026-09-30 datum.css was
 * dark-only and carried ~40 hard-coded dark hexes (#241c20 for a past week, #12351f for an
 * accepted badge…) that would have stayed dark on a light page. A new colour is a new token
 * here, defined for all three themes, or it is a bug in two of them.
 *
 * Source kit: docs/source/UI Elements/ — Color Palate.png (Carbon #000000, Midnight
 * #0e2837, Graphite #323230, Steel #747975, Aluminium #c3bebb, Dirty White #e8e7e2, Clean
 * White #e1e6ea) and the Shop Connect / docket mockup, whose dark ground (#0c1117), panel
 * (#111820) and steel-blue button (#7fa8be) are sampled straight from the image.
 * Contrast measured when written: body text 14–17:1 on every ground, secondary 5.4–6.7:1,
 * links 6–8:1, status colours ≥ 4.7:1. `--faint` is ~3:1 and is for tertiary marks only.
 *
 * THE THREE MODES, and how one is chosen:
 *   <html data-theme="light|dark|black">  — rendered SERVER-SIDE from the `theme` cookie,
 *                                          so a page is never painted in one theme and
 *                                          snapped to another (the rail cookie's reason).
 *   no attribute                          — nobody has picked on this device: follow the
 *                                          device's own light/dark setting.
 */

/* --- type ------------------------------------------------------------------ */
/* Chivo for headings, text and labels; Chivo Mono ONLY for job numbers, part numbers,
   POs, quantities and money — "so every digit lines up and nothing gets misread".
   Variable fonts: one file carries every weight 100–900. Subset to Latin + the
   punctuation the apps print (brand/README.md says how to rebuild them).
   ⚠️ Measured before choosing mono for numbers in dense tables: Chivo Mono's digits are
   0.600 em against Chivo's own 0.615 em, so the mono columns cost NO width. */
@font-face {
  font-family: "Chivo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/chivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Chivo"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/chivo-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "Chivo Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/chivo-mono-var.woff2") format("woff2");
}

:root {
  --font-sans: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* The Midnight brand bar: Datum's rail and Shop Connect's header. The SAME in every
     theme (Brodie, 2026-09-30: "Midnight rail always") — it is the brand, not a surface
     that follows the page. */
  --rail-bg:     #0e2837;
  --rail-panel:  #12303f;   /* the collapsed rail's fly-out */
  --rail-ink:    #e9eef1;
  --rail-dim:    #93a9b6;
  --rail-line:   #1d3b4c;
  --rail-hover:  #15374a;
  --rail-active: #1b4259;
  --rail-accent: #a9cde0;
  --rail-strong: #ffffff;   /* the logo, the current page */
  --rail-well:   rgba(0, 0, 0, .18);   /* the theme strip's inset */
  --rail-badge-bg:  #e2b04a;          /* a count waiting on you, on the bar */
  --rail-badge-ink: #1a1206;

  /* A drawing is on paper in every theme: the DXF renderer draws black strokes on no
     background, so this is load-bearing, not decoration (see .outline / .flat-svg). */
  --paper: #ffffff;
}

/* --- LIGHT — the default, and the printed docket's look ------------------------ */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg:          #efeee9;   /* Dirty White, lifted a step for long reading */
  --panel:       #ffffff;
  --panel-2:     #f6f5f1;
  --sunk:        #e4e3dd;   /* closed days, weekends, the inset job tree */
  --line:        #d9d7d0;
  --line-2:      #c4c1b8;   /* a rule that has to be seen: totals, month edges */
  --hover:       #f1f4f6;
  --ink:         #15212a;
  --dim:         #586169;
  --faint:       #7b8185;
  --accent:      #255f80;   /* Midnight's own hue, lightened until it reads as a link */
  --accent-dim:  #e2ebf0;
  --accent-line: #b3c9d6;
  --btn-bg:      #0e2837;   /* primary action = Midnight, like the docket's rules */
  --btn-ink:     #ffffff;
  --btn-hover:   #1b4259;
  --good:        #1b7342;
  --warn:        #9a5a06;
  --bad:         #b3261e;
  --good-bg:     #e4f2e9;
  --warn-bg:     #fbf0db;
  --bad-bg:      #f9e4e2;
  --good-line:   #a8d3b7;
  --warn-line:   #e3c48c;
  --bad-line:    #e5b0aa;
  --nest-report-bg: #fde68a; --nest-report-ink: #3f3000;   /* the Smartsheet's yellow */
  --nest-prog-bg:   #fbcfe8; --nest-prog-ink:   #4a0c33;   /* …its pink */
  --nest-cut-bg:    #bbf7d0; --nest-cut-ink:    #06341c;   /* …its green */
  --nest-manual-bg: #ddd6fe; --nest-manual-ink: #2a1a5e;
  --pink:        #b0306a;
  /* LABELS — Notion's palette, for stage and tag pills (.lbl-<name>). A colour
     NAME is what the database holds (project_stage.color); the hex lives here. */
  --lbl-gray-bg: #ebeced; --lbl-gray-ink: #4b5157;
  --lbl-brown-bg: #efe3d9; --lbl-brown-ink: #5c3b23;
  --lbl-orange-bg: #fbe1cc; --lbl-orange-ink: #7a3d0b;
  --lbl-yellow-bg: #fbedc4; --lbl-yellow-ink: #6b4f00;
  --lbl-green-bg: #dbeddb; --lbl-green-ink: #1f5132;
  --lbl-blue-bg: #d6e6f7; --lbl-blue-ink: #183f69;
  --lbl-purple-bg: #e8def8; --lbl-purple-ink: #46297a;
  --lbl-pink-bg: #f6dceb; --lbl-pink-ink: #6f1d4b;
  --lbl-red-bg: #fbdcd8; --lbl-red-ink: #7c1f17;
  --shadow:      0 8px 24px rgba(14, 40, 55, .16), 0 1px 3px rgba(14, 40, 55, .10);
  --backdrop:    rgba(14, 40, 55, .45);
}

/* --- DARK — the Shop Connect mockup ------------------------------------------- */
/* ⚠️ WRITTEN TWICE, ON PURPOSE, AND THE TWO COPIES MUST STAY IDENTICAL. The first
   applies when nobody has picked and the device prefers dark; the second when somebody
   picked Dark. A media query and an attribute selector cannot share one rule, and the
   alternative — a head script that sets the attribute from matchMedia — makes the
   default depend on JavaScript. brand/test_brand.py asserts the two blocks match. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:          #0c1117;
    --panel:       #111820;
    --panel-2:     #172029;
    --sunk:        #080c10;
    --line:        #1f2a33;
    --line-2:      #2f3d48;
    --hover:       #16212b;
    --ink:         #e5e9ec;
    --dim:         #8f9ca6;
    --faint:       #5d6a74;
    --accent:      #7fa8be;
    --accent-dim:  #132431;
    --accent-line: #2c4a5c;
    --btn-bg:      #7fa8be;
    --btn-ink:     #0b1620;
    --btn-hover:   #98bccf;
    --good:        #56c286;
    --warn:        #e2b04a;
    --bad:         #ec6f66;
    --good-bg:     #0f2419;
    --warn-bg:     #261f0d;
    --bad-bg:      #2a1416;
    --good-line:   #1f4d33;
    --warn-line:   #54431a;
    --bad-line:    #5a2428;
    --nest-report-bg: #6b5300; --nest-report-ink: #ffeaa0;
    --nest-prog-bg:   #6d1140; --nest-prog-ink:   #ffd6ea;
    --nest-cut-bg:    #12522f; --nest-cut-ink:    #b8f5cf;
    --nest-manual-bg: #332a6b; --nest-manual-ink: #d9d2ff;
    --pink:        #f08ab0;
    /* LABELS — Notion's palette, for stage and tag pills (.lbl-<name>). A colour
       NAME is what the database holds (project_stage.color); the hex lives here. */
    --lbl-gray-bg: #373c43; --lbl-gray-ink: #d7dbe0;
    --lbl-brown-bg: #4a3426; --lbl-brown-ink: #ecd3c0;
    --lbl-orange-bg: #5a3214; --lbl-orange-ink: #ffd2ad;
    --lbl-yellow-bg: #574415; --lbl-yellow-ink: #ffe7a3;
    --lbl-green-bg: #1f4a33; --lbl-green-ink: #bfeccc;
    --lbl-blue-bg: #1d3d61; --lbl-blue-ink: #c3dcf7;
    --lbl-purple-bg: #3d2b63; --lbl-purple-ink: #ddd0fb;
    --lbl-pink-bg: #5b2343; --lbl-pink-ink: #f9cfe3;
    --lbl-red-bg: #5e2420; --lbl-red-ink: #ffccc6;
    --shadow:      0 10px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --backdrop:    rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:          #0c1117;
    --panel:       #111820;
    --panel-2:     #172029;
    --sunk:        #080c10;
    --line:        #1f2a33;
    --line-2:      #2f3d48;
    --hover:       #16212b;
    --ink:         #e5e9ec;
    --dim:         #8f9ca6;
    --faint:       #5d6a74;
    --accent:      #7fa8be;
    --accent-dim:  #132431;
    --accent-line: #2c4a5c;
    --btn-bg:      #7fa8be;
    --btn-ink:     #0b1620;
    --btn-hover:   #98bccf;
    --good:        #56c286;
    --warn:        #e2b04a;
    --bad:         #ec6f66;
    --good-bg:     #0f2419;
    --warn-bg:     #261f0d;
    --bad-bg:      #2a1416;
    --good-line:   #1f4d33;
    --warn-line:   #54431a;
    --bad-line:    #5a2428;
    --nest-report-bg: #6b5300; --nest-report-ink: #ffeaa0;
    --nest-prog-bg:   #6d1140; --nest-prog-ink:   #ffd6ea;
    --nest-cut-bg:    #12522f; --nest-cut-ink:    #b8f5cf;
    --nest-manual-bg: #332a6b; --nest-manual-ink: #d9d2ff;
    --pink:        #f08ab0;
    /* LABELS — Notion's palette, for stage and tag pills (.lbl-<name>). A colour
       NAME is what the database holds (project_stage.color); the hex lives here. */
    --lbl-gray-bg: #373c43; --lbl-gray-ink: #d7dbe0;
    --lbl-brown-bg: #4a3426; --lbl-brown-ink: #ecd3c0;
    --lbl-orange-bg: #5a3214; --lbl-orange-ink: #ffd2ad;
    --lbl-yellow-bg: #574415; --lbl-yellow-ink: #ffe7a3;
    --lbl-green-bg: #1f4a33; --lbl-green-ink: #bfeccc;
    --lbl-blue-bg: #1d3d61; --lbl-blue-ink: #c3dcf7;
    --lbl-purple-bg: #3d2b63; --lbl-purple-ink: #ddd0fb;
    --lbl-pink-bg: #5b2343; --lbl-pink-ink: #f9cfe3;
    --lbl-red-bg: #5e2420; --lbl-red-ink: #ffccc6;
    --shadow:      0 10px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --backdrop:    rgba(0, 0, 0, .6);
}

/* --- BLACK — Dark with the blue taken out of the greys, on true black ---------- */
/* Carbon ground (an OLED phone draws nothing there), Graphite-derived rules, Dirty White
   text. Same steel-blue accent and status colours as Dark (Brodie's pick), so the two
   dark modes never disagree about what a colour MEANS. */
:root[data-theme="black"] {
  color-scheme: dark;
  --bg:          #000000;
  --panel:       #0c0c0c;
  --panel-2:     #141414;
  --sunk:        #000000;
  --line:        #262624;
  --line-2:      #3a3a37;
  --hover:       #161616;
  --ink:         #e8e7e2;
  --dim:         #8d918e;
  --faint:       #5c605d;
  --accent:      #7fa8be;
  --accent-dim:  #0f1d26;
  --accent-line: #2a4352;
  --btn-bg:      #7fa8be;
  --btn-ink:     #000000;
  --btn-hover:   #98bccf;
  --good:        #56c286;
  --warn:        #e2b04a;
  --bad:         #ec6f66;
  --good-bg:     #0b1f14;
  --warn-bg:     #211b0a;
  --bad-bg:      #240f11;
  --good-line:   #1e4630;
  --warn-line:   #4d3d17;
  --bad-line:    #532126;
  --nest-report-bg: #5c4700; --nest-report-ink: #ffeaa0;
  --nest-prog-bg:   #5e0f37; --nest-prog-ink:   #ffd6ea;
  --nest-cut-bg:    #0f4628; --nest-cut-ink:    #b8f5cf;
  --nest-manual-bg: #2c245e; --nest-manual-ink: #d9d2ff;
  --pink:        #f08ab0;
  /* LABELS — Notion's palette, for stage and tag pills (.lbl-<name>). A colour
     NAME is what the database holds (project_stage.color); the hex lives here. */
  --lbl-gray-bg: #373c43; --lbl-gray-ink: #d7dbe0;
  --lbl-brown-bg: #4a3426; --lbl-brown-ink: #ecd3c0;
  --lbl-orange-bg: #5a3214; --lbl-orange-ink: #ffd2ad;
  --lbl-yellow-bg: #574415; --lbl-yellow-ink: #ffe7a3;
  --lbl-green-bg: #1f4a33; --lbl-green-ink: #bfeccc;
  --lbl-blue-bg: #1d3d61; --lbl-blue-ink: #c3dcf7;
  --lbl-purple-bg: #3d2b63; --lbl-purple-ink: #ddd0fb;
  --lbl-pink-bg: #5b2343; --lbl-pink-ink: #f9cfe3;
  --lbl-red-bg: #5e2420; --lbl-red-ink: #ffccc6;
  --shadow:      0 10px 30px rgba(0, 0, 0, .8), 0 0 0 1px #262624;
  --backdrop:    rgba(0, 0, 0, .7);

  /* 🔷 BLACK'S BAR IS DARK MODE'S GROUND, #0c1117 (Brodie, 2026-10-01: "i was thinking of
     the #0c1217 color you have in the background of the dark mode"). Midnight beside a
     pure-black page read as a separate slab; this blue-black reads as the same night, with
     the edge line doing the separating (1.11:1 against #000; white on it 16:1). The other
     shades are Dark mode's own panel / line / hover. ⚠️ A first try went the other way —
     LIGHTER, #15405e — on the reading that Midnight looked black; the ask was for less
     contrast with the page, not more. Light and Dark keep exact Midnight. Black and the
     hidden Pink are the only themes that override `--rail-*`, which test_brand.py allows. */
  --rail-bg:     #0c1117;
  --rail-panel:  #111820;
  --rail-line:   #1f2a33;
  --rail-hover:  #16212b;
  --rail-active: #1a2a37;
}

/* --- PINK — the easter egg 🎀 ----------------------------------------------------
   Brodie, 2026-10-01: "one more theme as an easter egg ... very pink, like barbie themed
   ... I want to swap out the logo when this theme is selected." Never offered by a picker
   (brand.HIDDEN_THEMES): right-click a picker's LIGHT option and choose "Barbify"
   (brand/static/theme.js). A light theme underneath, so everything Light does still reads.
   Measured, because a joke that cannot be read is just a broken page: ink 13.7:1, labels
   6.7:1, links 5.3:1 on the pink ground; white on the bar 4.9:1. Raw Barbie pink (#fb2189)
   is only 3.7:1 against white, so it is the LOGO and the buttons — never body text. */
:root[data-theme="pink"] {
  color-scheme: light;
  --bg:          #fff0f7;
  --panel:       #ffffff;
  --panel-2:     #fff5fa;
  --sunk:        #ffdcec;
  --line:        #f8cde1;
  --line-2:      #f0a2c7;
  --hover:       #ffeef6;
  --ink:         #4a0d2e;
  --dim:         #8a3a62;
  --faint:       #b06a8e;
  --accent:      #c40e66;
  --accent-dim:  #ffe2f0;
  --accent-line: #f6a9cd;
  --btn-bg:      #e0157a;
  --btn-ink:     #ffffff;
  --btn-hover:   #c40e66;
  --good:        #1b7342;
  --warn:        #9a5a06;
  --bad:         #b3261e;
  --good-bg:     #e4f2e9;
  --warn-bg:     #fbf0db;
  --bad-bg:      #f9e4e2;
  --good-line:   #a8d3b7;
  --warn-line:   #e3c48c;
  --bad-line:    #e5b0aa;
  --nest-report-bg: #fde68a; --nest-report-ink: #3f3000;
  --nest-prog-bg:   #fbcfe8; --nest-prog-ink:   #4a0c33;
  --nest-cut-bg:    #bbf7d0; --nest-cut-ink:    #06341c;
  --nest-manual-bg: #ddd6fe; --nest-manual-ink: #2a1a5e;
  --pink:        #c40e66;
  /* LABELS — Notion's palette, for stage and tag pills (.lbl-<name>). A colour
     NAME is what the database holds (project_stage.color); the hex lives here. */
  --lbl-gray-bg: #ebeced; --lbl-gray-ink: #4b5157;
  --lbl-brown-bg: #efe3d9; --lbl-brown-ink: #5c3b23;
  --lbl-orange-bg: #fbe1cc; --lbl-orange-ink: #7a3d0b;
  --lbl-yellow-bg: #fbedc4; --lbl-yellow-ink: #6b4f00;
  --lbl-green-bg: #dbeddb; --lbl-green-ink: #1f5132;
  --lbl-blue-bg: #d6e6f7; --lbl-blue-ink: #183f69;
  --lbl-purple-bg: #e8def8; --lbl-purple-ink: #46297a;
  --lbl-pink-bg: #f6dceb; --lbl-pink-ink: #6f1d4b;
  --lbl-red-bg: #fbdcd8; --lbl-red-ink: #7c1f17;
  --shadow:      0 8px 24px rgba(214, 16, 111, .18), 0 1px 3px rgba(214, 16, 111, .12);
  --backdrop:    rgba(74, 13, 46, .45);

  /* The bar: Barbie pink, a step deeper than #fb2189 so white on it reads (4.9:1). */
  --rail-bg:     #d8157a;
  --rail-panel:  #c9106f;
  --rail-ink:    #ffffff;
  --rail-dim:    #fff1f8;
  --rail-line:   #ec4f9b;
  --rail-hover:  #e52b88;
  --rail-active: #b30c61;
  --rail-accent: #ffd6ea;
  --rail-well:   rgba(110, 0, 50, .2);
}

/* The script logo (docs/source/UI Elements/Datum Pink) replaces the DATUM wordmark in Pink.
   🔑 A MASK, NOT AN <img>: one cached SVG (brand/static/datum-script.svg) that takes the
   colour of wherever it sits — white on the pink bar, hot pink on a white sign-in card —
   which an <img> of a pink file cannot do. Emitted beside the wordmark by
   brand/templates/brand/_logo.html, so every logo in both apps swaps with no per-page code.
   ⚠️ The wordmark's hide is !important because each app's own rules show it (`.brand
   .datum-logo { display: block }`) and load after this file. */
.logo-pink { display: none; }
:root[data-theme="pink"] .datum-logo { display: none !important; }
:root[data-theme="pink"] .logo-pink {
  display: block; height: 32px; width: auto; aspect-ratio: 3179 / 1283;
  background: currentColor;
  -webkit-mask: url("datum-script.svg") no-repeat left center / contain;
          mask: url("datum-script.svg") no-repeat left center / contain;
}
/* On a white card the script is the Barbie pink itself, as drawn. */
:root[data-theme="pink"] .login-box .brand,
:root[data-theme="pink"] .lockup-lg .lockup-name { color: #fb2189; }

/* The right-click menu that offers "Barbify". Built by theme.js only when somebody
   right-clicks a Light option, and dressed like a plain native context menu so nothing
   about it — or the button it hangs off — gives the joke away first. */
.themeegg {
  position: fixed; z-index: 1000; min-width: 150px; padding: 4px 0;
  background: #ffffff; color: #1d1d1f; border: 1px solid #d4d4d8; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.themeegg button {
  display: block; width: 100%; padding: 6px 14px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: default; min-height: 0; border-radius: 0;
}
.themeegg button:hover, .themeegg button:focus-visible { background: #fb2189; color: #ffffff; outline: none; }

/* --- artwork drawn for one kind of ground ---------------------------------------
   The Forestdale logo exists in two versions — black lettering under the bar for a
   light page, white for a dark one — and neither can be recoloured. Put both in the
   markup with these classes and exactly one shows, including in "follow the device"
   mode, which only a media query can see. */
/* ⚠️ The HIDE rules are !important because they are a utility, and a component rule like
   `.login-foot img { display: block }` (class + element) out-ranks a bare class — which
   showed BOTH logos side by side on the Light sign-in page. Show rules need no force. */
.on-dark-only { display: none !important; }
:root[data-theme="dark"] .on-light-only, :root[data-theme="black"] .on-light-only { display: none !important; }
:root[data-theme="dark"] .on-dark-only, :root[data-theme="black"] .on-dark-only { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .on-light-only { display: none !important; }
  :root:not([data-theme]) .on-dark-only { display: block !important; }
}

/* --- the picker's swatches -----------------------------------------------------
   A dot in each mode's OWN ground colour, the same in every theme — it is a picture of
   the choice, not part of the current page. The picker's layout is per app (a compact
   strip in Datum's rail, three big buttons on Shop Connect's account page); these
   colours are the part that must agree. Literal on purpose: a swatch that followed the
   tokens would show the current theme three times. */
.swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(128, 140, 150, .75); flex: 0 0 auto;
}
.sw-light { background: #efeee9; }
.sw-dark  { background: #111820; }
.sw-black { background: #000000; }