/* ui2.tokens.css — NTBF staff app design tokens (WS2 design system).
 * Drop-in SUPERSET of the shipped ui2.css variables: every existing --u2-* name
 * is preserved verbatim; new tokens extend, never rename.
 * Namespaced under .ui2; dark theme = token swap only via .ui2[data-theme="dark"].
 * Load BEFORE ui2.css (ui2.css component rules may consume these).
 *
 * Breakpoints (by convention, no container tokens):
 *   320px  — hard floor; everything must work here
 *   360–412px — baseline fleet devices
 *   600px+ — office tablet: gutter 16→24px, list max-width 640px, Sheet → centred 480px dialog
 */

.ui2, .ui2-sheet {
  /* ── Colour · core (shipped, unchanged) ─────────────────────────── */
  --u2-paper: #F6F4EF;
  --u2-ink: #0B1420;
  --u2-card: #FFFFFF;
  --u2-muted: #5B6672;
  --u2-line: #E3DFD6;
  --u2-brand: #0E6DBE;
  --u2-indigo: #242A6B;        /* dispatch band — same value in dark */
  --u2-indigo-2: #2E3480;
  --u2-on-indigo: #EDEFFB;     /* 11.33:1 on indigo — AAA */
  --u2-on-indigo-dim: #A9AFD9; /* 6.07:1 — AA; captions/labels only */
  --u2-now: #F5A300;           /* SIGNATURE marigold — "needs you now" + cash */
  --u2-on-now: #221600;        /* 8.56:1 on marigold — AAA */
  --u2-go: #12936B;            /* stripes/icons/large text ≥18.66px bold ONLY (3.53:1 on paper) */
  --u2-stop: #D24A3D;          /* stripes/icons/large text ONLY (3.99:1 on paper) */

  /* ── Colour · tint backgrounds (shipped, unchanged) ─────────────── */
  --u2-go-bg: #E3F3EC;
  --u2-stop-bg: #FBE9E6;
  --u2-now-bg: #FDF0D6;
  --u2-brand-bg: #E4EFF9;
  --u2-muted-bg: #ECEAE4;

  /* ── Colour · REQUIRED-FIX tag/small-text tokens (new) ──────────── */
  --u2-go-text: #0C6B4C;       /* 5.68:1 on go-bg — AA (replaces --u2-go for 10px tag text) */
  --u2-stop-text: #B93A2E;     /* 4.83:1 on stop-bg — AA */
  --u2-now-text: #8A5B00;      /* 5.2:1 on now-bg — AA (codifies shipped hardcoded value) */

  /* ── Colour · codified previously-hardcoded values (new names) ──── */
  --u2-kpi-pos: var(--u2-go);          /* KPI value 22px mono = large text */
  --u2-kpi-neg: var(--u2-stop);
  --u2-now-action-bg: #FFFDF7;         /* onNow button surface */
  --u2-indigo-cell: rgba(255,255,255,.06);   /* instrument tile on indigo */
  --u2-indigo-cell-line: rgba(255,255,255,.12);
  --u2-shell-btn-bg: rgba(255,255,255,.1);
  --u2-scrim: rgba(11,20,32,.5);

  /* ── Focus (3px ring, 2px offset — §10.2) ───────────────────────── */
  --u2-focus: var(--u2-brand);         /* on paper/card */
  --u2-focus-on-indigo: var(--u2-now); /* on the dispatch band */
  --u2-focus-on-now: #221600;          /* on marigold surfaces */
  --u2-focus-w: 3px;
  --u2-focus-offset: 2px;

  /* ── Typography · families (shipped, unchanged) ─────────────────── */
  --u2-display: 'Archivo', system-ui, sans-serif;
  --u2-body: 'Inter2', system-ui, sans-serif;
  --u2-mono: 'PlexMono', ui-monospace, monospace;

  /* ── Typography · dynamic type (§3.3) ───────────────────────────── */
  /* Shell sets --u2-font-scale from platform fontScale, clamped 0.85–1.3.
     Reading tier scales fully; instrument tier at half effect. */
  --u2-font-scale: var(--u2-fs-root, 1); /* FLAG 7 ACTIVE (Asif 2026-07-27): app.js sets --u2-fs-root from the device, clamped 0.85-1.3 */
  --u2-font-scale-inst: calc(1 + (var(--u2-font-scale) - 1) * 0.5);

  /* ── Typography · scale (name / size / line-height / tracking) ──── */
  /* Reading tier (full scale factor) */
  --u2-fs-display: calc(20px * var(--u2-font-scale));   /* Archivo 800, lh 1.2 — NowCard title */
  --u2-fs-title: calc(16px * var(--u2-font-scale));     /* Archivo 700, lh 1.25 — TopBar name, Sheet title */
  --u2-fs-row-title: calc(15px * var(--u2-font-scale)); /* Archivo 700, lh 1.3 — ListRow title */
  --u2-fs-body: calc(13.5px * var(--u2-font-scale));    /* Inter 400, lh 1.5 */
  --u2-fs-body-sm: calc(12.5px * var(--u2-font-scale)); /* Inter 400, lh 1.45 — row sub, hints */
  --u2-fs-button: calc(14px * var(--u2-font-scale));    /* Inter 600, lh 1.2 */
  --u2-fs-button-sm: calc(12.5px * var(--u2-font-scale));
  /* Instrument tier (half scale factor — layout-critical mono/caption) */
  --u2-fs-metric-lg: calc(22px * var(--u2-font-scale-inst)); /* Plex Mono 600, tabular — KpiTile value */
  --u2-fs-metric: calc(20px * var(--u2-font-scale-inst));    /* NowCard metric */
  --u2-fs-metric-sm: calc(16px * var(--u2-font-scale-inst)); /* ListRow amount */
  --u2-fs-label: calc(11px * var(--u2-font-scale-inst));   /* Plex Mono 500/600 uppercase — shell labels (TopBar sub, Segment buttons). Pairs with --u2-ls-label. DISTINCT FROM: --u2-fs-caption-mono (data IDs, pills, notes) and --u2-fs-caption (Archivo section labels) — those two share a value and differ only by intent, so this third neighbour states its own. */
  --u2-fs-caption-mono: calc(10.5px * var(--u2-font-scale-inst)); /* Plex Mono 500 — IDs, pills, notes */
  --u2-fs-caption: calc(10.5px * var(--u2-font-scale-inst));      /* Archivo 600 — section labels */
  --u2-fs-tag: calc(10px * var(--u2-font-scale-inst));            /* Plex Mono 600 — StatusTag, eyebrow */
  --u2-fs-micro: calc(9.5px * var(--u2-font-scale-inst));         /* KPI label/unit — absolute floor */
  /* Line-heights */
  --u2-lh-display: 1.2; --u2-lh-title: 1.25; --u2-lh-body: 1.5;
  --u2-lh-metric: 1.1;  --u2-lh-caption: 1.3; --u2-lh-tight: 1.2;
  /* Tracking (uppercase tiers only) */
  --u2-ls-id: .05em;      /* mono IDs */
  --u2-ls-tag: .07em;     /* StatusTag, pills */
  --u2-ls-label: .08em;   /* TopBar sub, metric labels */
  --u2-ls-micro: .09em;   /* KPI labels */
  --u2-ls-sect: .12em;    /* section labels */

  /* ── Spacing · 4px base + sanctioned 2px half-steps (§4.1) ──────── */
  --u2-s05: 2px;
  --u2-s1: 4px;
  --u2-s15: 6px;
  --u2-s2: 8px;
  --u2-s25: 10px;   /* compact component padding (shipped KpiTile, list gap) */
  --u2-s3: 12px;
  --u2-s35: 14px;   /* row padding, TopBar top pad */
  --u2-s4: 16px;
  --u2-s45: 18px;
  --u2-s5: 20px;
  --u2-s6: 24px;
  --u2-s8: 32px;
  --u2-gutter: 16px;         /* screen gutter; 24px at 600px+ */
  --u2-touch-min: 44px;      /* effective hit-area floor (§4.4) */

  /* ── Radii (systematised shipped 7/9/10/12/14/16 — §5.1) ────────── */
  --u2-r-xs: 7px;    /* StatusTag */
  --u2-r-sm: 9px;    /* shell buttons */
  --u2-r-md: 10px;   /* small/row-action buttons, badge */
  --u2-r-lg: 12px;   /* ActionButton, KpiTile card, instrument group */
  --u2-r-xl: 14px;   /* ListRow, EmptyState */
  --u2-r-2xl: 16px;  /* NowCard, Sheet top corners */
  --u2-r-round: 999px;

  /* ── Borders & structure ────────────────────────────────────────── */
  --u2-bw: 1px;              /* the only border weight */
  --u2-stripe: 4px;          /* manifest-row status stripe (inline-start) */
  --u2-band-underline: 3px;  /* dispatch header marigold underline — signature */

  /* ── Motion (§8) ────────────────────────────────────────────────── */
  --u2-t-instant: 80ms;   /* press feedback, state flips */
  --u2-t-quick: 160ms;    /* tab switch, segmented slide, toggle */
  --u2-t-standard: 240ms; /* sheet, toast, list reveal */
  --u2-t-slow: 400ms;     /* spinner rotation; shimmer = 3× (1200ms) */
  --u2-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --u2-ease-decel: cubic-bezier(0, 0, 0, 1);   /* entering */
  --u2-ease-accel: cubic-bezier(.3, 0, 1, 1);  /* exiting */

  font-family: var(--u2-body);
  color: var(--u2-ink);
  background: var(--u2-paper);
  min-height: 100%;
}

/* ── Dark theme — TOKEN SWAP ONLY (same components) ───────────────── */
.ui2[data-theme="dark"] {
  --u2-paper: #0C1118;
  --u2-ink: #EDF1F6;           /* 16.69:1 — AAA */
  --u2-card: #151C26;
  --u2-muted: #8B96A5;         /* 6.32:1 — AA */
  --u2-line: #232C3A;
  --u2-indigo: #242A6B;        /* band stays indigo in both themes */
  --u2-indigo-2: #2E3480;
  --u2-go-bg: #10312A;
  --u2-stop-bg: #3A1B17;
  --u2-now-bg: #3A2C05;
  --u2-brand-bg: #10283E;
  --u2-muted-bg: #1B2430;
  /* required-fix text tokens, dark values */
  --u2-go-text: #4FD1A4;       /* 7.35:1 on dark go-bg — AA+ */
  --u2-stop-text: #F0A196;     /* 7.59:1 on dark stop-bg — AA+ */
  --u2-now-text: #F5C664;      /* codifies shipped dark tag colour */
  /* codified dark KPI accents (were hardcoded in ui2.css) */
  --u2-kpi-pos: #58D6AB;       /* 9.48:1 */
  --u2-kpi-neg: #F09287;       /* 7.48:1 */
  --u2-scrim: rgba(0,0,0,.6);
}

/* ── Reduced motion — zero the duration tokens too, so JS reading
     tokens inherits the guarantee; ui2.css keeps its kill-switch. ── */
@media (prefers-reduced-motion: reduce) {
  .ui2 {
    --u2-t-instant: 0ms;
    --u2-t-quick: 0ms;
    --u2-t-standard: 0ms;
    --u2-t-slow: 0ms;
  }
  .ui2 * { animation: none !important; transition: none !important; }
}