/* ── Design tokens: every color, shadow and size the console is drawn with ──
   The one place a color is chosen. Components and pages use var(--token),
   never a literal, so a palette change lands everywhere and dark mode comes
   for free. apps.core.frontend_ratchet counts literals left in templates.

   Each color is written once, as light-dark(light, dark). The browser picks
   the side from `color-scheme`, which follows the system unless the theme
   switch in the account menu has set data-theme (base.html restores it before
   first paint). This replaced three copies of the palette, the light one and
   two dark ones (the switch and the system preference), which had to be kept
   in step by hand and on 2026-08 were not.

   Dark is true black for the page, so OLED panels switch pixels off; cards get
   a hair of lift. Status text shades (the -d tokens) brighten in dark, because
   the light shades are tuned for dark text on a pale tint and go muddy on a
   near-black one. */
:root[data-theme="light"]{color-scheme:light;}

:root{
  color-scheme:light dark;

  /* Surfaces and text */
  --bg:light-dark(#f6f6f7, #000000);
  --surface:light-dark(#ffffff, #0d0d0f);
  --card:light-dark(#fbfbfd, #1c1c1e);
  --card-2:light-dark(#f5f5f7, #232326);
  --border:light-dark(rgba(17,17,26,.08), rgba(255,255,255,.08));
  --border-strong:light-dark(rgba(17,17,26,.14), rgba(255,255,255,.16));
  --text:light-dark(#1d1d1f, #f5f5f7);
  --muted:light-dark(#8a8a91, #98989d);
  --soft:light-dark(#56565e, #c7c7cc);
  --glass:light-dark(rgba(255,255,255,.72), rgba(10,10,12,.72));
  --glass-strong:light-dark(rgba(255,255,255,.85), rgba(10,10,12,.85));
  --hero-grad:linear-gradient(180deg, light-dark(#ffffff, #0d0d0f) 0%, light-dark(#fafafa, #000000) 100%);

  /* Brand and status colors. The accent IS the brand orange, named apart so
     a component can say what it means rather than which color it is. */
  --orange:#ff6b1a;
  --orange-d:light-dark(#e85d10, #ff9142);
  --orange-light:#ff8a4d;
  --accent:var(--orange);
  /* The accent's hover shade. A surface that scopes --accent (the review
     card's teal) scopes this beside it. */
  --accent-d:var(--orange-d);
  --accent-weak:light-dark(rgba(255,107,26,.10), rgba(255,107,26,.16));
  --purple:#af52de;
  --green:#34c759;
  --green-d:light-dark(#1e8e3e, #30d158);
  --red:#ff3b30;
  --red-d:light-dark(#c0271d, #ff453a);
  --yellow:#ff9500;
  --yellow-d:light-dark(#9a5b00, #ffd60a);
  --blue:#007aff;
  --blue-d:light-dark(#0a5fc7, #409cff);

  /* Status tones, one set, for badges, pills and tinted notes: -weak is the
     tint behind the text, -line its border, and the -d tokens above its text.
     Amber and gray had no tokens before, so templates wrote their own. */
  --amber:var(--yellow);
  --amber-d:var(--yellow-d);
  --gray:#8a8a91;
  --purple-d:light-dark(#7a3aa0, #bf6eff);
  --green-weak:light-dark(rgba(52,199,89,.14), rgba(48,209,88,.16));
  --green-line:light-dark(rgba(52,199,89,.30), rgba(48,209,88,.40));
  --amber-weak:light-dark(rgba(255,149,0,.16), rgba(255,214,10,.16));
  --amber-line:light-dark(rgba(255,149,0,.35), rgba(255,214,10,.40));
  --red-weak:light-dark(rgba(255,59,48,.13), rgba(255,69,58,.16));
  --red-line:light-dark(rgba(255,59,48,.30), rgba(255,69,58,.40));
  --blue-weak:light-dark(rgba(0,122,255,.12), rgba(64,156,255,.16));
  --blue-line:light-dark(rgba(0,122,255,.28), rgba(64,156,255,.40));
  --purple-weak:light-dark(rgba(175,82,222,.14), rgba(191,110,255,.18));
  --purple-line:light-dark(rgba(175,82,222,.30), rgba(191,110,255,.40));
  --orange-weak:light-dark(rgba(255,107,26,.10), rgba(255,145,66,.16));
  --orange-line:light-dark(rgba(255,107,26,.30), rgba(255,145,66,.40));
  --gray-weak:var(--card-2);
  --gray-line:var(--border);
  /* Navy is the brand's mail color (apps.email branding), teal the review
     deck's. -ink is the shade to use as text, which lightens in dark mode. */
  --navy:light-dark(#16293f, #12233a);
  --navy-ink:light-dark(#16293f, #9fb7d4);
  --teal:light-dark(#1c5c52, #237466);
  --teal-ink:light-dark(#1c5c52, #5cc4b0);
  --teal-weak:light-dark(rgba(28,92,82,.12), rgba(92,196,176,.20));
  --teal-line:light-dark(rgba(28,92,82,.30), rgba(92,196,176,.40));

  /* Chart and map series. Plain hex on purpose, not light-dark(): scripts
     read them with getComputedStyle for Leaflet and canvas, which get the
     unresolved text of a light-dark() value. A site kind names its series
     once here, so the crew map, the review deck and the worker's day agree. */
  --chart-1:#0a84ff;
  --chart-2:#ff9500;
  --chart-3:#af52de;
  --chart-4:#30d1c1;
  --chart-5:#e5484d;
  --chart-6:#1d7f3a;
  --site-job:var(--chart-1);
  --site-store:var(--chart-2);
  --site-paint:var(--chart-3);
  --site-hamilton:var(--chart-4);
  --site-food:var(--chart-5);
  --site-gas:var(--chart-6);
  --site-start:#5b5bd6;
  /* A walked route on a map: the line, a stop's pin and its fill, and the
     dark ink of labels and the current-position marker. */
  --map-trail:#c98a3e;
  --map-pin:#8a5a12;
  --map-pin-fill:#f4e3c1;
  --map-ink:#20242a;
  /* Text and icons on a saturated fill (the accent, a green or red button),
     and the dim behind a modal. Both stay the same in dark mode. */
  --on-accent:#fff;
  --overlay:rgba(20,20,28,.45);

  /* Shadows: light-dark() takes colors only, and the dark shadows differ in
     shape too, so their dark side is set in the block below. */
  --shadow-sm:1px 1px 2px light-dark(rgba(17,17,26,.05), rgba(0,0,0,.6));
  --shadow:1px 1px 2px rgba(17,17,26,.05), 4px 8px 22px -14px rgba(17,17,26,.18);
  --shadow-lg:8px 16px 44px -18px rgba(17,17,26,.22);

  /* Shape and layout */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:14px;
  --header-h:56px;  /* base.html measures the real header and overwrites this */
  --sb-w:224px;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* Older names, kept so partials written against a previous sheet still
     resolve. New code uses the names on the right. */
  --ink:var(--text);
  --line:var(--border-strong);
  --brand:var(--orange);
  --brand-dk:var(--orange-d);
  --danger:var(--red);
}

/* The two non-color tokens whose dark form differs in shape. Both triggers,
   because a selector cannot ask which side color-scheme picked: the theme
   switch, and the system preference when the switch has not been used. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --shadow:1px 1px 3px rgba(0,0,0,.5), 5px 10px 24px -8px rgba(0,0,0,.6);
  --shadow-lg:10px 20px 50px -16px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --shadow:1px 1px 3px rgba(0,0,0,.5), 5px 10px 24px -8px rgba(0,0,0,.6);
    --shadow-lg:10px 20px 50px -16px rgba(0,0,0,.7);
  }
}