@layer tokens {
  :root {
    color-scheme: light dark;

    --font: -apple-system, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;

    --fs-display: 34px; --lh-display: 40px;
    --fs-h1: 28px; --lh-h1: 34px;
    --fs-h2: 22px; --lh-h2: 28px;
    --fs-h3: 17px; --lh-h3: 22px;
    --fs-body: 15px; --lh-body: 22px;
    --fs-meta: 13px; --lh-meta: 18px;
    --fs-caption: 11px; --lh-caption: 14px;
    --fs-metric: 40px; --lh-metric: 44px;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;

    --r-chip: 12px; --r-media: 14px; --r-input: 16px; --r-bubble: 16px;
    --r-card: 20px; --r-sheet: 24px; --r-pill: 999px;

    --tap: 44px;
    --content-max: 640px;
    --header-h: 56px;
    --tabbar-h: 56px;

    --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;
    --ease: cubic-bezier(.2,.8,.2,1);
  }

  /* Dark — default */
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A1224;
    --bg-elevated: #0E1730;
    --surface: #152239;
    --surface-2: #1C2B47;
    --surface-3: #243654;
    --border: rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.16);
    --text: #F3F6FC;
    --text-muted: #95A3BE;
    --text-faint: #64748B;
    --accent: #2FE3A8;
    --accent-ink: #04241A;
    --accent-soft: rgba(47,227,168,.14);
    --accent-glow: rgba(47,227,168,.35);
    --info: #4C8BFF;
    --warn: #F0A93C;
    --warn-soft: rgba(240,169,60,.12);
    --danger: #FF6B6B;
    --shadow: none;
  }

  html[data-theme="light"] {
    color-scheme: light;
    --bg: #F5F7FB;
    --bg-elevated: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F1F4FA;
    --surface-3: #E7ECF5;
    --border: #E4E8F1;
    --border-strong: #C9D2E3;
    --text: #101728;
    --text-muted: #5C6883;
    --text-faint: #8B95AC;
    --accent: #0EA37B;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(14,163,123,.10);
    --accent-glow: rgba(14,163,123,.22);
    --info: #3B6FE0;
    --warn: #B9781A;
    --warn-soft: rgba(240,169,60,.14);
    --danger: #D64545;
    --shadow: 0 1px 2px rgba(16,23,40,.05), 0 8px 24px rgba(16,23,40,.06);
  }

  @media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]):not([data-theme="light"]) {
      color-scheme: light;
      --bg: #F5F7FB;
      --bg-elevated: #FFFFFF;
      --surface: #FFFFFF;
      --surface-2: #F1F4FA;
      --surface-3: #E7ECF5;
      --border: #E4E8F1;
      --border-strong: #C9D2E3;
      --text: #101728;
      --text-muted: #5C6883;
      --text-faint: #8B95AC;
      --accent: #0EA37B;
      --accent-ink: #FFFFFF;
      --accent-soft: rgba(14,163,123,.10);
      --accent-glow: rgba(14,163,123,.22);
      --info: #3B6FE0;
      --warn: #B9781A;
      --warn-soft: rgba(240,169,60,.14);
      --danger: #D64545;
      --shadow: 0 1px 2px rgba(16,23,40,.05), 0 8px 24px rgba(16,23,40,.06);
    }
  }

  html.theme-anim,
  html.theme-anim * {
    transition: background-color var(--dur-slow) var(--ease),
                border-color var(--dur-slow) var(--ease),
                color var(--dur-slow) var(--ease);
  }

  @media (prefers-reduced-motion: reduce) {
    html.theme-anim,
    html.theme-anim * { transition: none !important; }
  }
}