/* ══ Carwatch i/o — brand tokens ═══════════════════════════════════════════
   ONE source of truth for colour, type, radius and shadow across every
   surface we ship:

     landing page + CRM ....... carwatch/*.html      (Vercel, via styles.css)
     dashboard ................ scripts/alert_display.html      (Mini :8000)
     attendant display ........ scripts/attendant_display.html (Mini :8000)
     labeler .................. scripts/labeler.html           (Mini :8081)

   The Mini's two Python servers each serve THIS FILE at /brand.css, so the
   displays and the CRM cannot drift. Same rule as scripts/purelogic.py:
   never fork a copy — add the token here and use it there.

   Component rules do NOT belong in this file. A video pane, a hero state and
   an annotation canvas share a palette, not a stylesheet.

   ponytail: no @import of a webfont here on purpose. This file is linked by
   the attendant display, which must render during a site internet outage
   (CLAUDE.md §0.1 — four hours of it, 2026-07-30). A remote @import inside a
   linked sheet is render-blocking. Pages load the webfont themselves with a
   non-blocking <link>; --font's fallback stack covers the gap.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --font: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* ── Accent — electric indigo. Used sparingly: it means "interactive". ── */
  --accent:      #2647ff;
  --accent-2:    #1a34d1;   /* hover / pressed */
  --accent-weak: #eef0ff;   /* accent tint — active/selected fills */

  /* legacy names kept, remapped to the palette so every CRM rule resolves */
  --blue:        #2647ff;
  --blue-light:  #6072ff;
  --blue-dark:   #1a34d1;

  /* ── Surfaces — cool near-white ── */
  --ivory:       #fafafb;   /* page background */
  --ivory-2:     #f3f3f6;   /* subtle fill, inset wells */
  --surface:     #ffffff;   /* cards, bars, modals */
  --canvas:      #eceef2;   /* behind media — video panes, photo cells */

  /* ── Ink ── */
  --text:        #0b0b0f;   /* near-black */
  --text-2:      #6b7280;   /* muted / labels */
  --text-3:      #9aa1ae;   /* faintest — placeholders, disabled */

  /* ── Hairlines ── */
  --border:      #ececef;
  --border-md:   #dcdce0;   /* hover, emphasis */
  --border-hi:   #c9c9d0;   /* focus ring on neutral controls */

  /* ── Signals ─────────────────────────────────────────────────────────────
     The trio the landing page already speaks. Each has a solid (fills,
     bboxes, full-bleed states), a tint + tint-border (badges, banners), an
     ink (text ON the tint — all three pass 4.5:1) and a deep (gradient far
     stop on the attendant's full-bleed states).

     AMBER IS A YELLOW. White text on it fails contrast — anything sitting on
     --amber uses --amber-on, not #fff. That is why it exists.               */
  --red:          #e5484d;
  --red-bg:       #ffecec;
  --red-border:   #ffd9da;
  --red-ink:      #cf3438;
  --red-deep:     #a51f23;

  --green:        #2fa968;
  --green-bg:     #e7f7ee;
  --green-border: #c3ebd4;
  --green-ink:    #1b8a56;
  --green-deep:   #14603a;

  --amber:        #f2c00d;
  --amber-bg:     #fff3cf;
  --amber-border: #ffe7bd;
  --amber-ink:    #8a6500;
  --amber-deep:   #b8860a;
  --amber-on:     #2b2400;   /* ink for text sitting ON --amber */

  /* Offline / inert. Deliberately colourless: "the backend is unreachable" must not
     read as one of the three verdicts. Used by the attendant display's fail state and
     the dashboard's disconnected chrome. */
  --slate:        #6b7280;
  --slate-deep:   #3b4250;

  /* ── Geometry ── */
  --radius:      14px;      /* cards */
  --radius-sm:   10px;      /* inputs, buttons */
  --radius-xs:   6px;       /* tags, chips */

  --shadow:      0 1px 2px rgba(16,17,26,0.04), 0 2px 10px rgba(16,17,26,0.05);
  --shadow-lg:   0 12px 40px rgba(16,17,26,0.10);
}