/* StreamSet Box dashboard: tokens.
   Copied from poc/ux/css/tokens.css (palette Scintilla of apps/box, Docs/design.md v4, plus the touch
   extensions of docs/design/ux/README.md §3). Removed: set lighting (Buio/Sole), not used here.
   Added: light theme (prefers-color-scheme or data-theme="light"), same roles, colours darkened for
   text contrast on light surfaces (WCAG AA ≥ 4.5:1 for text). */
:root {
  color-scheme: dark;
  --base: #000000; --panel: #121212; --card: #1C1C1E; --field: #2C2C2E; --raised: #38383A; --active: #3A3A3C;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.11);
  --text: #FFFFFF; --text-body: #EBEBF0; --text-2: #AEAEB2; --text-3: #8E8E93;
  --brand: #FFD60A; --brand-hover: #FFE03D; --brand-text: #FFD60A; --brand-wash: rgba(255,214,10,.16); --on-brand: #1A1400;
  --warn: #FF9F0A; --rec: #FF453A; --rec-text: #FF6961; --ok: #30D158; --info: #64D2FF;
  --ok-wash: rgba(48,209,88,.16); --warn-wash: rgba(255,159,10,.16); --rec-wash: rgba(255,69,58,.18); --info-wash: rgba(100,210,255,.14);
  --scrim: rgba(0,0,0,.62);
  --glass: rgba(28,28,30,.86);
  --shadow: 0 20px 60px rgba(0,0,0,.5);
  --card-edge: transparent;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-pill: 999px;
  --ease: cubic-bezier(.2,.4,.1,1); --t: 150ms;
  --hit: 44px; --ctl: 36px;
  --rail: 72px; --top: 52px;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-34: 34px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
:root[data-input="touch"] { --ctl: 44px; }
@media (pointer: coarse) { :root { --ctl: 44px; } }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --base: #F2F2F7; --panel: #FFFFFF; --card: #FFFFFF; --field: #E9E9EE; --raised: #DCDCE1; --active: #E5E5EA;
    --line: rgba(0,0,0,.08); --line-2: rgba(0,0,0,.14);
    --text: #000000; --text-body: #1C1C1E; --text-2: #48484A; --text-3: #636366;
    --brand: #FFD60A; --brand-hover: #F5C800; --brand-text: #7A5F00; --brand-wash: rgba(255,214,10,.30); --on-brand: #1A1400;
    --warn: #A54A00; --rec: #D70015; --rec-text: #C00014; --ok: #1E7B34; --info: #00669E;
    --ok-wash: rgba(52,199,89,.16); --warn-wash: rgba(255,149,0,.16); --rec-wash: rgba(255,59,48,.12); --info-wash: rgba(0,122,255,.10);
    --scrim: rgba(0,0,0,.35); --glass: rgba(255,255,255,.92); --shadow: 0 20px 60px rgba(0,0,0,.18);
    --card-edge: rgba(0,0,0,.06);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --base: #F2F2F7; --panel: #FFFFFF; --card: #FFFFFF; --field: #E9E9EE; --raised: #DCDCE1; --active: #E5E5EA;
  --line: rgba(0,0,0,.08); --line-2: rgba(0,0,0,.14);
  --text: #000000; --text-body: #1C1C1E; --text-2: #48484A; --text-3: #636366;
  --brand: #FFD60A; --brand-hover: #F5C800; --brand-text: #7A5F00; --brand-wash: rgba(255,214,10,.30); --on-brand: #1A1400;
  --warn: #A54A00; --rec: #D70015; --rec-text: #C00014; --ok: #1E7B34; --info: #00669E;
  --ok-wash: rgba(52,199,89,.16); --warn-wash: rgba(255,149,0,.16); --rec-wash: rgba(255,59,48,.12); --info-wash: rgba(0,122,255,.10);
  --scrim: rgba(0,0,0,.35); --glass: rgba(255,255,255,.92); --shadow: 0 20px 60px rgba(0,0,0,.18);
  --card-edge: rgba(0,0,0,.06);
}
@media (prefers-reduced-motion: reduce) { :root { --t: 0ms; } }