/* ============================================================================
 * design-tokens.css — TITAN ONE canonical design tokens (single source of truth)
 *
 * Load FIRST in every page, before the page's own <style>:
 *   <link rel="stylesheet" href="design-tokens.css">
 *
 * Two layers:
 *   1. Canonical --t-* tokens — the only names new CSS should use.
 *   2. Legacy-alias bridge — maps every historical token name (--o-*, --bg/--sf/
 *      --tx short names, module color names) onto the canonical values, so a page
 *      can delete its local :root block and inherit identical values from here.
 *      While a page still defines its own :root, the page's values win (its
 *      <style> comes after this <link>) — linking this file changes nothing.
 *
 * Migration rule (per module restyle): delete the page-local :root token block,
 * keep ONE line setting the module accent, e.g.
 *   :root { --o-primary: var(--t-module-purchasing); }
 * Then convert page CSS to --t-* names at leisure; the bridge keeps old names
 * working meanwhile. Delete bridge entries only when no page uses them.
 *
 * Print output (labels, receipts, POs) does NOT reference these tokens — but it is no longer
 * "exempt". DESIGN-AUDIT D20's exemption was revoked 2026-07-24; print joins the design system and
 * is designed FROM these values, translated to 1-bit black and white. It cannot consume them
 * directly: at the thermal threshold (luminance < 160) ten distinct palette values — every module
 * accent, every semantic status colour, and --t-muted — collapse to one identical black, while
 * --t-dim and --t-border land above it and print as nothing at all. Hue carries no information on
 * paper, so print expresses hierarchy through weight, size and reversed fill instead.
 * Rules: docs/PRINT-TEMPLATES-DIRECTIVE.md §3. Implementation pending; the tokens are unchanged.
 * ========================================================================== */

:root {
  /* ── surfaces ── */
  --t-bg: #F3EEE5;            /* app background — warm cream */
  --t-surface: #FFFFFF;       /* cards, sheets, topbars */
  --t-surface-2: #FBF8F2;     /* secondary surface — inputs, rows, ghost buttons */
  /* ALTERNATING ROW TINT (Tarek, 27 Aug 2026: "give us alternate view maybe light light blue"). A
     row on these lists runs the full width of a laptop — a square, two lines of text, a date and a
     badge — and the eye loses which badge belongs to which supplier on the way across. Banding is
     the oldest fix there is for that, and it costs nothing to read.
     COOL, where every other surface in this palette is warm. That is the point rather than an
     oversight: a warm tint at this lightness is indistinguishable from the cream background and
     bands nothing. It is also NOT a module tint — borrowing Warehouse's steel blue would put one
     module's identity on another module's rows, which is exactly what the directive's three-places
     rule exists to stop. This is a neutral surface that happens to be blue. */
  --t-row-alt: #F2F6FB;       /* alternating list rows — a cool band, not an accent */
  --t-active: #F0E9DB;        /* active/track/selected fill */
  --t-border: #E5DDCD;
  --t-border-2: #EEE8DB;      /* hairlines inside cards */
  --t-track: #D8CFBD;         /* switch tracks, sheet grip */

  /* ── ink ── */
  --t-ink: #28221A;           /* primary text; logo mark color (never amber) */
  --t-ink-2: #57503F;         /* labels, secondary text */
  --t-muted: #8A8073;
  --t-dim: #B5AC9C;

  /* ── semantic ── */
  --t-danger: #C2402A;   --t-danger-soft: #F6E7E2;  --t-danger-tint: #FBEFEC;  --t-danger-border: #EBC4BB;
  --t-warning: #B87A00;  --t-warning-soft: #F5EBD7; --t-warning-tint: #FBEFD6;
  --t-success: #1B7F4D;  --t-success-soft: #E7F3EC; --t-success-border: #B7DCC4; --t-success-deep: #155E39;
  --t-info: #2D6FD9;     --t-info-soft: #E7EEFA;    --t-info-tint: #EAF1FC;   /* status info (Legend §2) — never a module accent */
  --t-whatsapp: #1FA855; --t-whatsapp-hover: #178C46;   /* WhatsApp send button only (Legend §2/§4) */

  /* ── THE MOMENTARY CUE (titan-dialog.js) ──────────────────────────────────────────────────────
     The slab that reports what just happened. It gets its own colours rather than reusing
     --t-success/--t-warning/--t-danger/--t-info, and it is DELIBERATELY NOT REDEFINED IN THE DARK
     BLOCK BELOW. That absence is the whole point: the dark theme brightens the status colours to
     #3DD68C, #FFB03A, #FF7A5C and #7FB4FF so they read on a dark surface, and white text on any of
     those is unreadable. The cue is white-on-colour in both themes, so it needs the daylight values
     in both. Measured, white on each slab: ok 5.01:1 · info 4.79 · warn 3.61 · bad 5.17 — all past
     the 3:1 floor large text needs (WCAG 1.4.3).

     THERE IS NO BORDER TOKEN, and that is deliberate too. The frame was removed on 2026-09-05 and
     the contrast lives in the FILL, not the frame — an outline treatment measured 1.8-2.4:1 during
     the wash, because with no box the letters sit on a 50% wash of their own colour. A border knob
     here would invite someone to turn the fill off and reach for the frame instead, which is the
     one change these numbers rule out. A real outline needs a darker ink per kind, not a border. */
  --t-cue-ok: #1B7F4D;  --t-cue-info: #2D6FD9;  --t-cue-warn: #B87A00;  --t-cue-bad: #C2402A;
  --t-cue-ink: #FFFFFF;

  /* The cue is the largest type on the platform — above --t-fs-title (26px) — so it carries its own
     scale. It steps DOWN as cues stack so a third never clips off a tablet. Values are Tarek's, set
     from the slider mockup on 2026-09-05. The tight line height was pixel-tested rather than
     assumed: at 1.05/28px/22ch, clipped and unclipped renders of Bengali, Armenian and Arabic come
     back byte-identical with the real Noto faces loaded. Theme-independent, so no dark override. */
  --t-fs-cue: clamp(16px, 4.5vw, 28px);     /* one cue on screen */
  --t-fs-cue-2: clamp(15px, 3.7vw, 24px);   /* two stacked */
  --t-fs-cue-3: clamp(14px, 3.1vw, 20px);   /* three stacked — the ceiling */
  --t-fw-cue: 800;                          /* IBM Plex Sans loads 400-800; there is no 900 */
  --t-lh-cue: 1.05;
  --t-cue-pad: .42em .58em;                 /* em, so padding tracks the type */
  --t-cue-gap: .38em;                       /* mark to words */
  --t-cue-mark: .92em;                      /* the drawn glyph's box */

  --t-accent: #B87A00;        /* brand amber — platform accent only (links, focus, unread); never a module hue or the logo mark */
  --t-btn-primary: #2A2E33;   /* design primary button = dark charcoal */
  --t-btn-primary-hover: #1E2226;

  /* ── module accents — one per module (Legend rev, approved 2026-07-13; supersedes directive Rev 1,
   *    2026-07-09). A page sets its working accent from exactly one of these; two modules never share
   *    one. Status colors (success/warning/danger/info) never double as a module accent. Tint = the
   *    hue at ~11% on white (dark variants: brighter hue, deep desaturated tint). ── */
  --t-module-souk: #1B7F4D;        --t-module-souk-hover: #166A40;      --t-module-souk-tint: #E8F1EC;   /* green — exclusive to Souk */
  --t-module-purchasing: #B03A6E;  --t-module-purchasing-hover: #963056; --t-module-purchasing-tint: #F7E9F0; /* magenta */
  --t-module-admin: #7C4FE0;       --t-module-admin-hover: #6A3FCB;     --t-module-admin-tint: #F0EAFB;  /* purple */
  --t-module-orders: #0E7C9C;      --t-module-orders-hover: #0B6379;    --t-module-orders-tint: #E6F1F4; /* teal — Orders/requisition */
  --t-module-production: #C2532E;  --t-module-production-hover: #A5431F; --t-module-production-tint: #F9EBE4; /* terracotta — Production/KDS */
  --t-module-labels: #A8862D;      --t-module-labels-hover: #8C6F24;    --t-module-labels-tint: #F5F0E0; /* gold (distinct from warning amber) */
  --t-module-warehouse: #3D6F9E;   --t-module-warehouse-hover: #35618B; --t-module-warehouse-tint: #E9F0F6; /* steel blue — Warehouse (B0-signed; white-on-base 5.3:1) */
  --t-module-shipments: #2F3438;   --t-module-shipments-hover: #23272A;  --t-module-shipments-tint: #ECEEEF; /* graphite — Shipments (BL). Neutral on purpose: it is paperwork, not a stock colour. */
  --t-module-operations: #5C6B7A;  --t-module-operations-hover: #4C5966; --t-module-operations-tint: #EDF0F2; /* slate — Operations (transfers · counts · daily ins/outs). Renamed from "Stock ops"/CONTROL, U9 13 Jul. */
  --t-module-stockops: var(--t-module-operations); --t-module-stockops-hover: var(--t-module-operations-hover); --t-module-stockops-tint: var(--t-module-operations-tint); /* legacy alias — bridge until any old refs migrate */

  /* STOCK-OUT step colours (STOCK-OUT-BRIEF-REV2.md · Tarek's explicit D1 override, "strong shades
     approved"). The keeper's six steps are colour-coded including the buttons, which the design
     directive otherwise forbids — one accent per module, accent in three places only. That override
     is deliberate and scoped: these are STEP colours, not a second module accent, and stock-out's
     accent is still --t-module-operations. They live here rather than in the page because the core
     law is that no module file holds a raw hex. Identical in both themes: the gradients already
     carry their own contrast and are read as progress, not as surface. */
  --t-so-step1-a:#38bdf8; --t-so-step1-b:#0284c7;   /* kitchen segment */
  --t-so-step2-a:#4ade80; --t-so-step2-b:#16a34a;   /* grand category */
  --t-so-step3-a:#fbbf24; --t-so-step3-b:#d97706;   /* category */
  --t-so-step4-a:#fb923c; --t-so-step4-b:#ea580c;   /* item */
  --t-so-step5-a:#a78bfa; --t-so-step5-b:#7c3aed;   /* quantity */
  --t-so-step6-a:#f472b6; --t-so-step6-b:#db2777;   /* trolley */
  --t-module-receiving: #74802F;   --t-module-receiving-hover: #5F6926; --t-module-receiving-tint: #F1F2E6; /* olive — Receiving inbox */
  --t-module-approvals: #8E2F44;   --t-module-approvals-hover: #772637; --t-module-approvals-tint: #F6EAED; /* burgundy — Approvals deck */
  --t-module-poseidon: #2456E6;    --t-module-poseidon-hover: #1E49C4;  --t-module-poseidon-tint: #E8EDFC; /* cobalt — Poseidon (reserved cobalt) */
  /* POSEIDON-DASHBOARD-BRIEF §5 asks for an `--accent-poseidon` token that recolours the owner
     dashboard in ONE line. That token now exists — as an ALIAS, because Poseidon already has a
     registry-official accent (cobalt, accent registry Rev 1 · POSEIDON-THE-BOOK §4) and a second
     colour for the same module would give one page two accents and break the registry. Ruled
     2026-08-03: keep cobalt, add the name. Repointing this one line is still the one-line recolour
     the brief wanted; repointing the line ABOVE recolours the whole module and needs a registry
     amendment. Both themes inherit automatically — there is deliberately no dark-mode override
     here, because the variable it tracks already has one. */
  --accent-poseidon: var(--t-module-poseidon);
  --accent-poseidon-hover: var(--t-module-poseidon-hover);
  --accent-poseidon-tint: var(--t-module-poseidon-tint);
  --t-module-scan: #2563EB;        --t-module-scan-hover: #1D4ED8;      --t-module-scan-tint: #E5EDFF;   /* cobalt — Scan surface. ⚠ near-collides with Poseidon #2456E6 (D1: two modules must not share a hue); Tarek to resolve — nudge scan or fold Scan into its serving module's accent. */
  --t-module-qc: #0891B2;          --t-module-qc-hover: #0E7490;        --t-module-qc-tint: #E3F5FA;     /* cyan — QC batch lookup. Promotes qc.html's page-local --qc into the token system (D1 registration); distinct hue from cobalt/steel-blue clusters. */
  --t-module-audit: #7C3181;       --t-module-audit-hover: #692A6D;     --t-module-audit-tint: #F1E8F1;  /* plum — Audit (D1 registration, 2026-08-24). Hue 296°, chosen because it is the middle of the ONE wide gap the registry still had: admin sits at 259° and purchasing at 334°, so this keeps ~37° from each in BOTH themes. White-on-base 8.0:1. Deliberately not another blue — that cluster already carries the unresolved Scan/Poseidon collision. */
  --t-module-whatsapp: #3D7022;   --t-module-whatsapp-hover: #325D1C;  --t-module-whatsapp-tint: #EBF2E5;/* PROVISIONAL, not yet ratified into the accent registry (Rev 1 is locked) — Tarek to confirm or replace before this module is announced. Hue 99deg, chosen the same way Audit's was: it is the middle of the widest gap left, between Receiving 68deg and Souk 148deg, so it keeps 30deg from Receiving and 49deg from Souk. Deliberately NOT WhatsApp's own brand green (142deg) — that would sit 6deg off Souk. White-on-base 5.9:1. */
  /* legacy alias — Production/KDS was named "kitchen"; keep until KDS files migrate. */
  --t-module-kitchen: var(--t-module-production); --t-module-kitchen-hover: var(--t-module-production-hover); --t-module-kitchen-tint: var(--t-module-production-tint);

  /* ── environment indicators — platform-level signals, NOT module accents (Tarek, 13 Jul 2026).
   *    These never enter the module registry above and never style module UI; they mark which
   *    WORLD you are in. Staging orange = the unremovable TITAN banner (titan-env.js). ── */
  --t-env-staging: #E8730C;
  --env-staging: var(--t-env-staging);  /* semantic alias — the name the banner uses */

  /* ── typography ── */
  --t-font: "IBM Plex Sans", -apple-system, "Segoe UI", "Noto Sans Bengali", "Noto Sans Armenian", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
  --t-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --t-fs-body: 14px;

  /* ── shape · corner radius ────────────────────────────────────────────────
   * ZERO PLATFORM-WIDE — decision D4 (Tarek, 23 Aug 2026 · design directive Rev 2 §9).
   * Nothing on Titan One is rounded: not tiles, not cards, not buttons, not inputs, not tabs,
   * not avatars, not badges, not notification counts, not status dots. Nothing uses 50%.
   *
   * The three tokens exist ONLY so the decision can be reversed in one line if it is ever
   * revisited. No module file may hold a literal radius value — that is the core law applied
   * to shape, exactly as it already applies to colour.
   */
  --radius-sm: 0;   /* badges, chips, counts, avatars, round icons, status dots */
  --radius-md: 0;   /* buttons, inputs, selects, tabs */
  --radius-lg: 0;   /* cards, tiles, banners, modals, panels, sheets */

  /* Legacy shape names. Kept as aliases of the three above so no old token name can smuggle a
     radius back in, and so a page that has not been converted yet still renders square. Callers
     were migrated to --radius-* in the Rev 2 sweep; these are a safety net, not an invitation. */
  --t-r-sm: var(--radius-sm);
  --t-r-md: var(--radius-md);
  --t-r-lg: var(--radius-lg);
  --t-r-xl: var(--radius-lg);
  --t-r-pill: var(--radius-sm);
  --t-r-card: var(--radius-lg);
  --t-r-btn: var(--radius-md);
  --t-r-sheet: var(--radius-lg);

  --t-bw: 1.5px;    /* standard border weight (kiosk surfaces may use 2px) */
  --t-accent-bar: 5px; /* module accent bar thickness. NOT the active tab any more — D5 makes the
                          active tab a solid accent fill with white text, not an underlay bar. */

  /* ── type scale (Legend §3) — role sizes; weight noted in the comment ── */
  --t-fs-title: 26px;    /* screen title · 700 */
  --t-fs-header: 19px;   /* header · 700 */
  --t-fs-row: 17px;      /* row title · 700 */
  --t-fs-strong: 16px;   /* emphasised body · 600 */
  --t-fs-meta: 13px;     /* meta · 600 */
  --t-fs-label: 12px;    /* section label · 700 UPPERCASE .07em — the type floor */

  /* ── control heights (Legend §4) — 44px touch floor ── */
  --t-tap: 44px;         /* minimum touch target */
  --t-h-chip: 48px;      /* chips / tabs */
  --t-h-btn: 52px;       /* secondary button */
  --t-h-input: 56px;     /* inputs / WhatsApp */
  --t-h-primary: 60px;   /* primary button */
  --t-h-keypad: 72px;    /* PIN keypad key */
}

/* ── Legacy-alias bridge ────────────────────────────────────────────────────
 * Historical names → canonical values. Page-local :root blocks override these
 * until each module is migrated; then the local block is deleted and these
 * take over with identical values. Module accents (--o-primary, --coral,
 * --purple, …) stay page-local on purpose — each page picks its own. */
:root {
  /* --o-* scheme (requisition/orders, purchasing, label app Titan screens) */
  --o-brand-odoo: var(--t-surface);
  --o-btn-primary: var(--t-btn-primary);
  --o-btn-primary-hover: var(--t-btn-primary-hover);
  --o-bg-color: var(--t-bg);
  --o-sheet-bg: var(--t-surface);
  --o-sheet2-bg: var(--t-surface-2);
  --o-active-bg: var(--t-active);
  --o-border-color: var(--t-border);
  --o-border2-color: var(--t-border-2);
  --o-text-color: var(--t-ink);
  --o-text-muted: var(--t-muted);
  --o-text-dim: var(--t-dim);
  --o-label-color: var(--t-ink-2);
  --o-danger: var(--t-danger);
  --o-warning: var(--t-warning);
  --o-success: var(--t-success);
  --o-accent: var(--t-accent);
  --o-input-border: var(--t-border);
  --o-teal-tint: var(--t-module-orders-tint);
  --o-pink-tint: var(--t-module-purchasing-tint);

  /* short scheme (settings, cockpit, kitchen-board, provision) */
  --bg: var(--t-bg);
  --sf: var(--t-surface);
  --sf2: var(--t-surface-2);
  --rowAlt: var(--t-row-alt);
  --bd: var(--t-border);
  --bd2: var(--t-border-2);
  --tx: var(--t-ink);
  --tx2: var(--t-ink-2);
  --mut: var(--t-muted);
  --dim: var(--t-dim);
  --accent: var(--t-accent);
  --ok: var(--t-success);
  --okBg: var(--t-success-soft);
  --danger: var(--t-danger);
  --err: var(--t-danger);

  /* module color names used by the short-scheme pages */
  --coral: var(--t-module-kitchen);
  --coralBg: var(--t-module-kitchen-tint);
  --teal: var(--t-module-orders);
  --tealBg: var(--t-module-orders-tint);
  --purple: var(--t-module-admin);
  --purpleBg: var(--t-module-admin-tint);
  --done: var(--t-success);
  --doneBg: var(--t-success-soft);
  --late: var(--t-danger);
  --lateBg: var(--t-danger-tint);
}

/* ── Night shift (dark theme) ────────────────────────────────────────────────
 * Activated by <html data-theme="dark"> (set by theme.js / the anti-flash head
 * script). `:root[data-theme="dark"]` has specificity (0,2,0), so it OVERRIDES
 * each page's local light `:root` (0,1,0) regardless of source order — one block
 * flips every page that consumes these token names via var(). Values: handoff
 * README §"Palette — Night shift". Tints are precomputed hex (no color-mix dep,
 * so old Chrome can't drop them to transparent). Un-tokenized hardcoded hex in a
 * page does NOT flip — that's the Phase-2 leak hunt (biggest on the label app). */
:root[data-theme="dark"] {
  /* surfaces */
  --t-bg: #161411;  --t-surface: #201D18;  --t-surface-2: #1B1814;  --t-active: #2A251D;
  /* The banding survives the dark theme by going COOLER, not lighter: against a warm #201D18 row a
     lighter band would read as a highlight — "this one is selected" — which is a different sentence
     from "this is the next row". Same luminance, different temperature. */
  --t-row-alt: #1B1E23;
  --t-border: #332D24;  --t-border-2: #2A251D;  --t-track: #645C4E;
  /* ink */
  --t-ink: #F0EBE1;  --t-ink-2: #CDC5B6;  --t-muted: #978E7D;  --t-dim: #645C4E;
  /* semantic */
  --t-danger: #FF7A5C;  --t-danger-soft: #3A241E;  --t-danger-tint: #33211C;  --t-danger-border: #5A392E;
  --t-warning: #FFB03A;  --t-warning-soft: #3A2F1C;  --t-warning-tint: #322A1A;
  --t-success: #3DD68C;  --t-success-soft: #1E3328;  --t-success-border: #2E6B4E;  --t-success-deep: #8FE8BE;
  --t-info: #7FB4FF;     --t-info-soft: #1B2A44;     --t-info-tint: #17233C;
  --t-accent: #FFB03A;
  --t-btn-primary: #FFB03A;  --t-btn-primary-hover: #E89A2A;
  /* module accents — dark variants (same registry, brighter for dark surfaces) */
  --t-module-souk: #3DD68C;        --t-module-souk-hover: #2FB575;      --t-module-souk-tint: #1E3328;
  --t-module-purchasing: #EC6AA6;  --t-module-purchasing-hover: #D9548F; --t-module-purchasing-tint: #33202B;
  --t-module-admin: #B08AFF;       --t-module-admin-hover: #9A70F0;     --t-module-admin-tint: #2A2438;
  --t-module-orders: #4EC3E0;      --t-module-orders-hover: #38A9C6;    --t-module-orders-tint: #17303A;
  --t-module-production: #FF8A5C;  --t-module-production-hover: #E8724A; --t-module-production-tint: #33251E;
  --t-module-labels: #E8C04A;      --t-module-labels-hover: #D4A93A;    --t-module-labels-tint: #332B18;
  --t-module-warehouse: #7EA6CC;   --t-module-warehouse-hover: #9DBCDA; --t-module-warehouse-tint: #14273A; /* steel blue — dark variant */
  --t-module-shipments: #B9C0C6;   --t-module-shipments-hover: #CBD1D6;  --t-module-shipments-tint: #23262A; /* graphite — dark variant */
  --t-module-operations: #93A2B0;  --t-module-operations-hover: #A8B5C1; --t-module-operations-tint: #202730; /* slate — Operations dark variant */
  --t-module-stockops: var(--t-module-operations); --t-module-stockops-hover: var(--t-module-operations-hover); --t-module-stockops-tint: var(--t-module-operations-tint); /* legacy alias */
  --t-module-receiving: #AEBB63;   --t-module-receiving-hover: #C3CE7E; --t-module-receiving-tint: #23281A; /* olive — dark variant */
  --t-module-approvals: #E0788E;   --t-module-approvals-hover: #E895A6; --t-module-approvals-tint: #33161D; /* burgundy — dark variant */
  --t-module-poseidon: #7C9BFF;    --t-module-poseidon-hover: #9DB4FF;  --t-module-poseidon-tint: #1A2340; /* cobalt — dark variant */
  --t-module-scan: #60A5FA;        --t-module-scan-hover: #93C5FD;      --t-module-scan-tint: #16233F; /* cobalt — dark variant */
  --t-module-qc: #38BDF8;          --t-module-qc-hover: #7DD3FC;        --t-module-qc-tint: #0E2A33; /* cyan — QC dark variant */
  --t-module-audit: #D68FDB;       --t-module-audit-hover: #E3AEE7;     --t-module-audit-tint: #2E1F33; /* plum — Audit dark variant (same 296° hue; hover lightens, per the dark convention above) */
  --t-module-whatsapp: #8FCB6B;    --t-module-whatsapp-hover: #A9D98C;  --t-module-whatsapp-tint: #1C2716; /* leaf green — WhatsApp inbox dark variant (same 99deg hue; hover lightens, per the dark convention above) */
  --t-module-kitchen: var(--t-module-production); --t-module-kitchen-hover: var(--t-module-production-hover); --t-module-kitchen-tint: var(--t-module-production-tint);

  /* ── re-assert the legacy aliases so they beat each page's local light :root ── */
  --o-brand-odoo: var(--t-surface);  --o-btn-primary: var(--t-btn-primary);  --o-btn-primary-hover: var(--t-btn-primary-hover);
  --o-bg-color: var(--t-bg);  --o-sheet-bg: var(--t-surface);  --o-sheet2-bg: var(--t-surface-2);  --o-active-bg: var(--t-active);
  --o-border-color: var(--t-border);  --o-border2-color: var(--t-border-2);  --o-text-color: var(--t-ink);  --o-text-muted: var(--t-muted);
  --o-text-dim: var(--t-dim);  --o-label-color: var(--t-ink-2);  --o-danger: var(--t-danger);  --o-warning: var(--t-warning);
  --o-success: var(--t-success);  --o-accent: var(--t-accent);  --o-input-border: var(--t-border);
  --o-teal-tint: var(--t-module-orders-tint);  --o-pink-tint: var(--t-module-purchasing-tint);

  --bg: var(--t-bg);  --sf: var(--t-surface);  --sf2: var(--t-surface-2);  --rowAlt: var(--t-row-alt);  --bd: var(--t-border);  --bd2: var(--t-border-2);
  --tx: var(--t-ink);  --tx2: var(--t-ink-2);  --mut: var(--t-muted);  --dim: var(--t-dim);  --accent: var(--t-accent);
  --ok: var(--t-success);  --okBg: var(--t-success-soft);  --danger: var(--t-danger);  --err: var(--t-danger);

  --coral: var(--t-module-kitchen);  --coralBg: var(--t-module-kitchen-tint);  --teal: var(--t-module-orders);  --tealBg: var(--t-module-orders-tint);
  --purple: var(--t-module-admin);  --purpleBg: var(--t-module-admin-tint);  --done: var(--t-success);  --doneBg: var(--t-success-soft);
  --late: var(--t-danger);  --lateBg: var(--t-danger-tint);

  /* souk module customs (souk.html / souk-approve.html — they link this file) */
  --souk: var(--t-module-souk);  --soukBg: var(--t-module-souk-tint);  --green: var(--t-module-souk);  --tomato: #FF7A5C;  --tomatoBg: #3A241E;  --over: #645C4E;  --amberBg: #3A2F1C;
}

/* ── Theme toggle button (sun in light, moon in dark) — shared across pages ── */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-md);   /* DES-6: 44 touch target */
  border:1.5px solid var(--t-border); background:var(--t-surface-2); color:var(--t-ink-2); cursor:pointer; padding:0; flex:0 0 auto; font-family:inherit; }
/* DES-6 — platform-wide minimum touch targets. These set only min-height/min-width, so each page's
   padding/font rules still apply on top; tabs, icon buttons and chips all clear 44x48. */
.hubbtn { width:44px !important; height:44px !important; }

/* ── The one tab component (D5, design directive Rev 2 §4) ───────────────────
 * ACTIVE  = solid module-accent fill, white text.
 * INACTIVE= transparent fill, neutral outline, neutral text.
 * Square, like everything else (D4).
 *
 * This is the SECOND of the three permitted accent placements (module icon, active tab, primary
 * action button) — it does not add a fourth. It replaces the Rev 1 "filled pill tabs" rule, and
 * it replaces card tabs, underline tabs and full-width card buttons for view selection.
 *
 * A module opts in by naming its accent once on the tab row:
 *     .tabs { --tab-accent: var(--t-module-souk); }
 * A page that forgets falls back to the platform accent, so a tab is never left unreadable.
 * Pages that declare their own .tab rules still win the cascade (their <style> comes after this
 * link) — every module was brought to this exact contract in the Rev 2 sweep. */
.tab { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:transparent; border:1.5px solid var(--t-border); color:var(--t-ink-2);
  border-radius:var(--radius-md); }
.tab.active, .tab.on, .tab[aria-selected="true"] {
  background:var(--tab-accent, var(--t-accent)); border-color:var(--tab-accent, var(--t-accent));
  color:#fff; }
.theme-toggle:active { transform:scale(.94); }
.theme-toggle svg { width:20px; height:20px; fill:currentColor; }
.theme-toggle .i-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display:inline; }
/* fallback position when theme.js can't find a topbar to mount into (RTL-safe) */
.theme-toggle-float { position:fixed; bottom:16px; inset-inline-start:16px; z-index:90; box-shadow:0 2px 10px rgba(0,0,0,.22); }

/* ── Titan One mark (logo) — inherits the theme ink via currentColor, so it flips light/dark
   automatically. INERT until the asset lands: drop titan-one-mark.svg into assets/ to activate.
   Set width per placement; height = width × 1.19 (preserves the 370:440 master ratio). Per the
   brand rule the mark is never rendered below 64px on screen / 18px in print — below that use the
   plain TITAN ONE type wordmark, or the T1 / T monogram for square icon slots. ── */
.brand-mark { display:inline-block; background:currentColor;
  -webkit-mask:url('assets/titan-one-mark.svg') center / contain no-repeat;
          mask:url('assets/titan-one-mark.svg') center / contain no-repeat; }