/* Synced to tokens.json — dark OLED default; lite=data-lite="1" (stays dark); optional light=data-theme="light" */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0A0A0A;
  --color-surface: #141414;
  --color-surface-elevated: #1C1C1C;
  --color-text: #F2F4F3;
  --color-text-muted: #A0A8A6;
  --color-border: #2A2A2A;
  --color-primary: #128C7E;
  --color-primary-pressed: #0E6F64;
  --color-accent: #25D366;
  --color-warning: #FFB020;
  --color-danger: #E35D6A;
  --color-xp: #F5A623;
  --color-premium: #7B6CF0;
  --color-skeleton: #1C1C1C;
  --color-chip-offline-bg: #2A2210;
  --color-chip-offline-fg: #FFB020;
  --color-chip-ok-bg: #0F2A1C;
  --color-chip-ok-fg: #25D366;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --motion-max: 150ms;
  --space-pad: 16px;
  --radius-card: 12px;
  --radius-pill: 24px;
  --touch-min: 44px;
  --nav-h: 56px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Optional later — not MVP default */
html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #F7F8F5;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-text: #111B21;
  --color-text-muted: #667781;
  --color-border: #E9EDEF;
  --color-primary: #128C7E;
  --color-primary-pressed: #0E6F64;
  --color-accent: #25D366;
  --color-warning: #FFB020;
  --color-danger: #E35D6A;
  --color-xp: #F5A623;
  --color-premium: #5B4BDB;
  --color-skeleton: #E9EDEF;
  --color-chip-offline-bg: #FFF8E6;
  --color-chip-offline-fg: #8A6A00;
  --color-chip-ok-bg: #E8F8EF;
  --color-chip-ok-fg: #0B7A3E;
  --shadow-card: 0 1px 3px rgba(17, 27, 33, 0.08);
}

/* Lite: stays on current theme (prefer dark); strips images + motion */
html[data-lite="1"] { --motion-max: 0ms; }
html[data-lite="1"] img,
html[data-lite="1"] picture,
html[data-lite="1"] .decor,
html[data-lite="1"] [data-decorative] { display: none !important; }
html[data-lite="1"] .skel { animation: none !important; }
html[data-lite="1"] * { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-max: 0ms; }
  * { animation: none !important; transition: none !important; }
}

body { margin: 0; background: var(--color-bg); color: var(--color-text); }