:root,
[data-theme="light"] {
  color-scheme: light;
  --page-bg: #f1f5f9;
  --page-bg-gradient: radial-gradient(circle at top, #ffffff 0, #f1f5f9 55%, #e2e8f0 100%);
  --text: #0f172a;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --surface: rgba(255, 255, 255, 0.98);
  --surface-elevated: #ffffff;
  --surface-hover: #f1f5f9;
  --border: rgba(148, 163, 184, 0.55);
  --border-subtle: rgba(148, 163, 184, 0.28);
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --accent-text: #1d4ed8;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --input-bg: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.98);
  --nav-border: rgba(148, 163, 184, 0.35);
  --nav-text: #334155;
  --nav-logo: #2563eb;
  --nav-earned: #15803d;
  --success: #15803d;
  --success-soft: #dcfce7;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-text: #dc2626;
  --warning-text: #b45309;
  --editor-stage-bg: #e2e8f0;
  --editor-crop-shade: rgba(15, 23, 42, 0.42);
  --emoji-overlay-bg: rgba(255, 255, 255, 0.45);
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  --overlay-backdrop: rgba(15, 23, 42, 0.45);
}

[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #020617;
  --page-bg-gradient: radial-gradient(circle at top, #020617 0, #020617 45%, #000 100%);
  --text: #f9fafb;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --surface: rgba(15, 23, 42, 0.98);
  --surface-elevated: #1e293b;
  --surface-hover: #334155;
  --border: rgba(148, 163, 184, 0.45);
  --border-subtle: rgba(148, 163, 184, 0.2);
  --accent: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.25);
  --accent-text: #93c5fd;
  --link: #93c5fd;
  --link-hover: #bfdbfe;
  --input-bg: #020617;
  --nav-bg: rgba(15, 23, 42, 0.98);
  --nav-border: rgba(148, 163, 184, 0.3);
  --nav-text: #e2e8f0;
  --nav-logo: #93c5fd;
  --nav-earned: #86efac;
  --success: #86efac;
  --success-soft: rgba(34, 197, 94, 0.15);
  --danger: #b91c1c;
  --danger-soft: rgba(127, 29, 29, 0.3);
  --danger-text: #fca5a5;
  --warning-text: #fcd34d;
  --editor-stage-bg: #0f172a;
  --editor-crop-shade: rgba(0, 0, 0, 0.55);
  --emoji-overlay-bg: rgba(15, 23, 42, 0.35);
  --shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
  --overlay-backdrop: rgba(0, 0, 0, 0.8);
}