:root {
  /* Brand */
  --color-brand-500: #6c5ce7;
  --color-brand-600: #5a4bd1;
  --color-brand-100: #ece9ff;

  /* Semantic */
  --color-bg: #f7f7fb;
  --color-surface: #ffffff;
  --color-surface-2: #f0f0f5;
  --color-text: #1b1b22;
  --color-text-muted: #5f6070;
  --color-border: #e3e3ec;
  --color-success: #00b894;
  --color-warning: #fdcb6e;
  --color-danger: #e17055;
  --color-focus: #6c5ce7;
  --color-on-brand: #ffffff;
  --color-scrim: rgba(27, 27, 34, 0.62);
  --color-wash: rgba(108, 92, 231, 0.08);

  /* Game stage */
  --color-stage-bg: #0b0b12;
  --color-stage-loader-bg: #121218;
  --color-stage-loader-text: rgba(255, 255, 255, 0.84);
  --color-stage-glow: rgba(108, 92, 231, 0.42);
  --color-stage-track: rgba(255, 255, 255, 0.2);
  --color-overlay-bg: rgba(18, 18, 24, 0.6);
  --color-overlay-border: rgba(255, 255, 255, 0.1);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 20, 40, 0.10);
  --shadow-lg: 0 12px 32px rgba(20, 20, 40, 0.16);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --shell-max-width: 1280px;
  --header-height: 60px;
  --stage-max-width: 960px;

  /* Mobile-first */
  --touch-target-min: 44px;
  --font-size-min-mobile: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Ads */
  --ad-label-color: #8a8a9a;
  --ad-bg: #f0f0f5;
  --ad-border: #e3e3ec;
  --ad-close-size: 24px;

  /* Pixel shell (all g-shell pages; see assets/css/pixel.css) */
  --pixel-grid-size: 8px;
  --pixel-border-width: 3px;
  --pixel-border-thin: 2px;
  --pixel-shadow-offset: 4px;
  --pixel-shadow-offset-lg: 6px;
  --pixel-ui-font: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
    Menlo, Consolas, monospace;
  --pixel-bg: #f4f1e6;
  --pixel-bg-grid: #ebe6d6;
  --pixel-surface: #fffdf5;
  --pixel-surface-2: #efe9d8;
  --pixel-ink: #1d1b2f;
  --pixel-muted: #565369;
  --pixel-line: #1d1b2f;
  --pixel-brand: #6c5ce7;
  --pixel-brand-strong: #4e3fc7;
  --pixel-brand-soft: #ddd8ff;
  --pixel-accent: #ffd34e;
  --pixel-accent-2: #22c9a0;
  --pixel-on-brand: #ffffff;
  --pixel-on-accent: #1d1b2f;
  --pixel-on-scrim: #ffffff;
  --pixel-shadow: #1d1b2f;
  --pixel-focus: #4e3fc7;

  /* Z-index */
  --z-header: 100;
  --z-ad: 150;
  --z-overlay: 200;
  --z-toast: 300;
}

[data-theme="dark"] {
  --color-bg: #121218;
  --color-surface: #1c1c25;
  --color-surface-2: #24242f;
  --color-text: #f1f1f6;
  --color-text-muted: #a0a0b0;
  --color-border: #2e2e3a;
  --color-brand-100: #2b2750;

  --ad-label-color: #7a7a8a;
  --ad-bg: #1c1c25;
  --ad-border: #2e2e3a;

  /* Pixel shell */
  --pixel-bg: #131126;
  --pixel-bg-grid: #1a1730;
  --pixel-surface: #1d1a33;
  --pixel-surface-2: #272345;
  --pixel-ink: #f6f3ff;
  --pixel-muted: #b3aecf;
  --pixel-line: #f6f3ff;
  --pixel-brand: #8d7bff;
  --pixel-brand-strong: #b3a5ff;
  --pixel-brand-soft: #322b63;
  --pixel-accent: #ffd34e;
  --pixel-accent-2: #2ee6b0;
  --pixel-on-brand: #141226;
  --pixel-on-accent: #141226;
  --pixel-shadow: #07050f;
  --pixel-focus: #ffd34e;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}