/*
  TagBadger design tokens — TagFinderWeb (admin portal) binding.
  Source of truth: docs/design/tagbadger-tokens.md (Direction B, "Signal" — WEB-26).
  Neutrals/state colors carry over from Direction A unchanged (their AA math still
  holds); the brand block is signal green, per the approved Direction B mockups.
  Green is both the brand accent and the Matched state — deliberately; form
  separates them (fills/links = brand, pills = state), same as red already
  sharing danger + Unknown. One green fill per screen.

  Identical --tb-* names/values to marketing/site/css/tokens.css (DS-01: one token
  set, one decision). Do not add web-only tokens here unless the tokens doc gains
  them first — this file is a binding, not a second source of truth.
*/
:root{
  /* Tier 1 — neutrals */
  --tb-surface:#0E1319;
  --tb-surface-container-lowest:#0B0F14;
  --tb-surface-container-low:#131A22;
  --tb-surface-container:#182029;
  --tb-surface-container-high:#1E2833;
  --tb-surface-container-highest:#25313E;
  --tb-outline-variant:#2B3644;
  --tb-outline:#3B4959;

  --tb-on-surface:#E9EFF5;
  --tb-on-surface-variant:#96A3B2;
  --tb-on-surface-faint:#7B8896; /* legal on surface/-lowest/-low/-container only — never -high/-highest */

  /* Tier 1 — brand (Direction B: signal green; 8.1:1 as text on surface, on-primary 8.2:1 on the fill) */
  --tb-primary:#3FBF8F;
  --tb-on-primary:#04140D;
  --tb-primary-hover:#57CBA1;
  --tb-primary-pressed:#2EA478;
  --tb-primary-quiet:rgba(63,191,143,.12);
  --tb-primary-line:rgba(63,191,143,.38);
  --tb-hover:rgba(233,239,245,.05);      /* row interactions stay neutral — quiet by design */
  --tb-selected:rgba(233,239,245,.09);
  --tb-focus:#3FBF8F;
  --tb-disabled:rgba(233,239,245,.38);
  --tb-disabled-fill:rgba(233,239,245,.12);

  /* Tier 2 — verification states (text / fill / line triples) */
  --tb-state-matched:#3FBF8F;       --tb-state-matched-fill:rgba(63,191,143,.12);  --tb-state-matched-line:rgba(63,191,143,.38);
  --tb-state-short:#E7A93C;         --tb-state-short-fill:rgba(231,169,60,.12);    --tb-state-short-line:rgba(231,169,60,.38);
  --tb-state-over:#5AA2EA;          --tb-state-over-fill:rgba(90,162,234,.12);     --tb-state-over-line:rgba(90,162,234,.38);
  --tb-state-unknown:#E8695B;       --tb-state-unknown-fill:rgba(232,105,91,.12);  --tb-state-unknown-line:rgba(232,105,91,.38);

  /* Tier 2 — reader and data (reader-live reuses primary — now signal green) */
  --tb-scan-live:#3FBF8F;
  --tb-scan-idle:#7B8896;
  --tb-scan-down:#E8695B;
  --tb-data:#96A3B2;
  --tb-danger:#E8695B;

  /* Type — self-hosted Inter (see tagbadger-fonts.css), sans for prose, mono for data */
  --tb-sans: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --tb-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Space — 4px base */
  --tb-s1:4px; --tb-s2:8px; --tb-s3:12px; --tb-s4:16px; --tb-s5:24px; --tb-s6:32px; --tb-s7:48px; --tb-s8:64px;

  /* Shape */
  --tb-r-chip:6px; --tb-r-control:8px; --tb-r-card:12px; --tb-r-modal:16px;

  /* Elevation — web uses CSS shadow (Android is tonal-only, not our concern here) */
  --tb-e1:0 1px 2px rgba(0,0,0,.4);
  --tb-e2:0 8px 24px -12px rgba(0,0,0,.7);
  --tb-e3:0 24px 60px -30px rgba(0,0,0,.85);

  /* Motion */
  --tb-dur-micro:120ms; --tb-dur-std:180ms; --tb-dur-emph:260ms; --tb-dur-sweep:3400ms;
  --tb-ease:cubic-bezier(.2,0,0,1);
}

/*
  Light theme (Phase 5, docs/design/tagbadger-tokens.md §11). Not wired to a toggle here —
  web light is a preference, not a functional requirement (unlike Android's sunlight mode) —
  but the block ships so the token set is a true value-swap everywhere it's consumed (DS-04),
  and so a future admin "light mode" setting costs nothing to add. Values are identical to
  marketing/site/css/tokens.css's light block — same source derivation, not a separate guess.
*/
[data-theme="light"]{
  --tb-surface:#F6F8FA;
  --tb-surface-container-lowest:#FFFFFF;
  --tb-surface-container-low:#F1F4F7;
  --tb-surface-container:#EBEEF2;
  --tb-surface-container-high:#E3E7EC;
  --tb-surface-container-highest:#D8DEE5;
  --tb-outline-variant:#DDE3E9;
  --tb-outline:#8D97A1;

  --tb-on-surface:#12181E;
  --tb-on-surface-variant:#4B5563;
  --tb-on-surface-faint:#5F6975; /* legal on surface/-lowest/-low/-container only — same rule as dark */

  /* Direction B light brand: deep signal green (5.25:1 on surface; white-on-fill 5.6:1) */
  --tb-primary:#197653;
  --tb-on-primary:#FFFFFF;
  --tb-primary-hover:#156044;
  --tb-primary-pressed:#0F4A34;
  --tb-primary-quiet:rgba(25,118,83,.12);
  --tb-primary-line:rgba(25,118,83,.38);
  --tb-hover:rgba(18,24,30,.05);
  --tb-selected:rgba(18,24,30,.09);
  --tb-focus:#197653;
  --tb-disabled:rgba(18,24,30,.38);
  --tb-disabled-fill:rgba(18,24,30,.12);

  --tb-state-matched:#197653;       --tb-state-matched-fill:rgba(25,118,83,.12);   --tb-state-matched-line:rgba(25,118,83,.38);
  --tb-state-short:#915F08;         --tb-state-short-fill:rgba(145,95,8,.12);      --tb-state-short-line:rgba(145,95,8,.38);
  --tb-state-over:#186BBF;          --tb-state-over-fill:rgba(24,107,191,.12);     --tb-state-over-line:rgba(24,107,191,.38);
  --tb-state-unknown:#C82A19;       --tb-state-unknown-fill:rgba(200,42,25,.12);   --tb-state-unknown-line:rgba(200,42,25,.38);

  --tb-scan-live:#197653;
  --tb-scan-idle:#5F6975;
  --tb-scan-down:#C82A19;
  --tb-data:#4B5563;
  --tb-danger:#C82A19;

  --tb-e1:0 1px 2px rgba(20,26,33,.10);
  --tb-e2:0 8px 24px -12px rgba(20,26,33,.18);
  --tb-e3:0 24px 60px -30px rgba(20,26,33,.22);
}

@media (prefers-reduced-motion: reduce){
  :root{ --tb-dur-micro:0ms; --tb-dur-std:0ms; --tb-dur-emph:0ms; --tb-dur-sweep:0ms; }
}