/* ============================================================================
 * 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) is exempt from the design system and
 * intentionally does not use these tokens.
 * ========================================================================== */

: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 */
  --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) */
  --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-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 */
  --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) */
  --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. */
  /* 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 ── */
  --t-r-sm: 10px;   /* inputs, small buttons */
  --t-r-md: 12px;   /* buttons, toasts */
  --t-r-lg: 16px;   /* cards, modals */
  --t-r-xl: 20px;   /* hub tiles, sheets */
  --t-r-pill: 99px;
  --t-bw: 1.5px;    /* standard border weight (kiosk surfaces may use 2px) */
  --t-r-card: 18px;   /* Legend §4 card radius (17–20) */
  --t-r-btn: 15px;    /* Legend §4 button radius (13–17) */
  --t-r-sheet: 24px;  /* bottom-sheet top corners */
  --t-accent-bar: 5px; /* module accent bar / active-tab underlay thickness */

  /* ── 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);
  --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;
  --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-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-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);  --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:99px;   /* 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; tab pills, icon buttons and chips all clear 44x48. */
.tab { min-height:44px; }
.hubbtn { width:44px !important; height:44px !important; }
.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; }