/* ============================================================
   DOOK — DESIGN TOKENS
   The only place colour, shape and type are decided.

   Source of truth: the approved design handoff (round 3+) and
   UI_DESIGN_REQUIREMENTS_PWA_v1 §1. Every value below appears on a
   board; nothing here was invented at build time.

   COLOUR IS MEANING — four meanings, and only four:
     teal   available / succeeded / the machine is alive
     violet what is yours — INCLUDING debt (a statement, never a threat)
     gray   asleep / unknown
     red    YOUR action failed — never a system state, never debt

   Yellow is the brand and the primary action. It is a FILL, never ink.
   Contains no product numbers — see tests/no-hardcoded-numbers.sh

   🔴 THREE INKS DEVIATE FROM THE HANDOFF, DELIBERATELY, AND ONLY
   BECAUSE THEY WERE UNREADABLE ON THE SCREEN THEY SHIP ON:

     light  --muted / --idle   #6B7175 → #616569
     light  --ok    / --ok-ink #02A58D → #017A67
     dark   --muted / --idle   #898A8E → #A5A5A9

   The hue is the handoff's. Only the lightness moved, and only as far
   as the threshold plus a small margin.

   WHAT THE MEASUREMENT FOUND, in the order it hurt:

   1. Light `--ok` carried the station's count of ready batteries — the
      largest thing on that screen — at **2.80:1**. It also paints the
      focus ring and the live dot, which are UI and owe 3:1.
   2. `--muted` failed on **every tinted surface, in both themes** —
      down to 4.07:1 in light and 3.84:1 in dark. Its plain-ground
      value looked fine; a caption inside a violet or teal banner did
      not, and a banner is exactly where a caption matters. This is the
      finding a palette review cannot produce: it only appears once the
      translucent layers are composited down to the real ground.

   `tests/delivery.cjs` now does that arithmetic on every visible text
   run, on every screen, in both themes. A token edited back under the
   line fails the gate instead of shipping.
   ============================================================ */

/* ---------- self-hosted brand faces (OFL, from the brand pack) ----------
   No external CDN: a PWA requirement and a performance one. Subset to
   Arabic + Latin; Changa ships as one variable file for all weights. */
@font-face{
  font-family:'Changa'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../../assets/fonts/changa.woff') format('woff');
}
@font-face{
  font-family:'Montserrat Arabic'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../../assets/fonts/msar-400.woff') format('woff');
}
@font-face{
  font-family:'Montserrat Arabic'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../../assets/fonts/msar-600.woff') format('woff');
}
@font-face{
  font-family:'Montserrat Arabic'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../../assets/fonts/msar-700.woff') format('woff');
}
@font-face{
  font-family:'Montserrat Arabic'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../../assets/fonts/msar-800.woff') format('woff');
}

:root{
  /* ---------- dark: the brand's home ground ---------- */
  --bg:#1F2426;
  --card:#262D30;                       /* the closed card. #313E47 is retired */
  --card-line:rgba(243,243,243,.07);
  --hair:rgba(243,243,243,.08);
  --text:#F3F3F3;
  --muted:#A5A5A9;
  --secondary:rgba(243,243,243,.07);    /* secondary button fill */
  --secondary-press:rgba(243,243,243,.12);

  /* brand — a fill, never ink */
  --yellow:#FFD64D; --yellow-press:#FFE183; --yellow-off:#FFECB4; --on-yellow:#1F2426;

  /* the four meanings */
  --ok:#09CCB0;    --ok-ink:#52DBC8;  --ok-soft:#9DEBDF;  --ok-surf:rgba(9,204,176,.10);
  --mine:#8D5FFF;  --mine-ink:#AF8FFF;--mine-soft:#D1BFFF;--mine-surf:rgba(141,95,255,.10);
  --idle:#A5A5A9;  --idle-ink:#A5A5A9; --idle-surf:rgba(165,165,169,.14); --idle-line:rgba(165,165,169,.30);
  --bad:#E14B3F;   --bad-ink:#FF7A70; --bad-surf:#3A1F1D;

  /* derived, and declared as derived: the brand carries no amber and no red */
  --amber-ink:#F5A85C; --amber-surf:#3A2A14; --amber-line:rgba(245,168,92,.34);
  --bad-line:rgba(225,75,63,.42);
  --offline-fill:#5A666E;

  /* sheets sit above everything, on shadow rather than border */
  --sheet:rgba(38,45,48,.97);
  --sheet-line:rgba(243,243,243,.06);
  --sheet-shadow:0 -18px 50px rgba(0,0,0,.5);
  --grabber:rgba(243,243,243,.18);
  --scrim:rgba(0,0,0,.55);

  --skeleton:rgba(243,243,243,.06);
  --skeleton-hi:rgba(243,243,243,.11);

  /* the logo: yellow on dark, dark on light. Never recoloured. */
  --logo:url('../../assets/brand/logo-bilingual-yellow.png');

  /* ---------- shape ---------- */
  --chamfer:14px;                 /* the signature — yellow primary CTA ONLY */
  --r-card:16px;
  --r-btn:12px;
  --r-field:14px;
  --r-sheet:24px;
  --r-banner:10px;

  /* ---------- rhythm ---------- */
  --gutter:24px;
  --section:32px;
  --row:50px;
  --tap:48px;
  --cta:56px;

  /* ---------- type ---------- */
  --latin:'Changa',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arabic:'Montserrat Arabic','Changa',system-ui,-apple-system,sans-serif;
  --font:var(--latin);
  --figures:'Changa',system-ui,sans-serif;   /* money · time · slot digits */

  --t-hero:84px;   --t-hero-sm:64px;
  --t-title:26px;  --t-cardtitle:14px;
  --t-body:15px;   --t-cap:13px;  --t-min:11px;
}

/* ---------- light: a peer, not a fallback ---------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F3F3F3;
    --card:#FFFFFF;
    --card-line:rgba(31,36,38,.09);
    --hair:rgba(31,36,38,.10);
    --text:#1F2426;
    --muted:#616569;
    --secondary:rgba(31,36,38,.06);
    --secondary-press:rgba(31,36,38,.11);

    --ok:#017A67;   --ok-ink:#017A67;  --ok-soft:#046052;  --ok-surf:rgba(1,122,103,.10);
    --mine:#54419D; --mine-ink:#54419D;--mine-soft:#54419D;--mine-surf:rgba(84,65,157,.09);
    --idle:#616569; --idle-ink:#616569;--idle-surf:rgba(97,101,105,.12); --idle-line:rgba(97,101,105,.28);
    --bad:#C0392B;  --bad-ink:#B02E20; --bad-surf:#FCEBE9;

    --amber-ink:#9A5B12; --amber-surf:#FDF0DF; --amber-line:rgba(154,91,18,.28);
    --bad-line:rgba(176,46,32,.30);
    --offline-fill:#8B9599;

    --sheet:rgba(255,255,255,.98);
    --sheet-line:rgba(31,36,38,.08);
    --sheet-shadow:0 -18px 50px rgba(31,36,38,.18);
    --grabber:rgba(31,36,38,.18);
    --scrim:rgba(31,36,38,.44);

    --skeleton:rgba(31,36,38,.06);
    --skeleton-hi:rgba(31,36,38,.11);

    --logo:url('../../assets/brand/logo-bilingual-dark.png');
  }
}

/* explicit choice wins, in both directions */
:root[data-theme="light"]{
  --bg:#F3F3F3;
  --card:#FFFFFF;
  --card-line:rgba(31,36,38,.09);
  --hair:rgba(31,36,38,.10);
  --text:#1F2426;
  --muted:#616569;
  --secondary:rgba(31,36,38,.06);
  --secondary-press:rgba(31,36,38,.11);
  --ok:#017A67;   --ok-ink:#017A67;  --ok-soft:#046052;  --ok-surf:rgba(1,122,103,.10);
  --mine:#54419D; --mine-ink:#54419D;--mine-soft:#54419D;--mine-surf:rgba(84,65,157,.09);
  --idle:#616569; --idle-ink:#616569;--idle-surf:rgba(97,101,105,.12); --idle-line:rgba(97,101,105,.28);
  --bad:#C0392B;  --bad-ink:#B02E20; --bad-surf:#FCEBE9;
  --amber-ink:#9A5B12; --amber-surf:#FDF0DF; --amber-line:rgba(154,91,18,.28);
  --bad-line:rgba(176,46,32,.30);
  --offline-fill:#8B9599;
  --sheet:rgba(255,255,255,.98);
  --sheet-line:rgba(31,36,38,.08);
  --sheet-shadow:0 -18px 50px rgba(31,36,38,.18);
  --grabber:rgba(31,36,38,.18);
  --scrim:rgba(31,36,38,.44);
  --skeleton:rgba(31,36,38,.06);
  --skeleton-hi:rgba(31,36,38,.11);
  --logo:url('../../assets/brand/logo-bilingual-dark.png');
}

/* Arabic swaps the family only — never a layout rule */
:root[lang="ar"]{ --font:var(--arabic); }