:root {
  color-scheme: light;
  --color-brand-navy: #183b6b;
  --color-brand-navy-strong: #0f2747;
  --color-brand-surface: #183b6b;
  --color-brand-surface-strong: #0f2747;
  --color-brand-blue: #2563eb;
  --color-brand-blue-strong: #1d4ed8;
  --color-brand-blue-soft: #dbeafe;
  --color-brand-sky: #38bdf8;
  --color-heading: var(--color-brand-navy);
  --color-heading-strong: var(--color-brand-navy-strong);
  --color-link: var(--color-brand-blue);
  --color-link-strong: var(--color-brand-blue-strong);
  --color-ink: #172033;
  --color-body: #46556a;
  --color-muted: #718198;
  --color-muted-soft: #9aa8ba;
  --color-canvas: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f7fafe;
  --color-surface-blue: #eef5ff;
  --color-surface-header: #e7eef8;
  --color-border: #d6e0ed;
  --color-border-strong: #b9c8da;
  --color-baseline: #111827;
  --color-on-baseline: #ffffff;
  --color-low: #2563eb;
  --color-low-soft: #60a5fa;
  --color-high: #f97316;
  --color-high-soft: #fb923c;
  --color-high-strong: #c2410c;
  --color-high-text: var(--color-high-strong);
  --color-high-surface: #ffedd5;
  --color-current: #16a34a;
  --color-current-text: var(--color-current);
  --color-current-soft: #dcfce7;
  --color-current-border: #86efac;
  --color-positive: #16a34a;
  --color-positive-text: var(--color-positive);
  --color-negative: #dc2626;
  --color-negative-text: var(--color-negative);
  --color-price-low: #7c3aed;
  --color-price-low-guide: rgba(124, 58, 237, 0.42);
  --color-price-high: #d97706;
  --color-price-high-guide: rgba(217, 119, 6, 0.42);
  --color-cycle-1: var(--color-low);
  --color-cycle-2: var(--color-high-strong);
  --color-cycle-3: var(--color-current);
  --color-cycle-4: var(--color-price-low);
  --color-warning: #b45309;
  --color-warning-text: var(--color-warning);
  --color-warning-soft: #fff7ed;
  --color-warning-surface: #fffaf0;
  --color-on-dark: #ffffff;
  --color-footer-body: #c8d5e6;
  --color-footer-link: #dce8f7;
  --color-footer-meta: #aebed2;
  --color-body-contrast: #253044;
  --color-muted-contrast: #46556a;
  --color-border-contrast: #8da0b8;
  --color-border-strong-contrast: #667991;
  --color-browser-theme: #0f2747;
  --color-logo-surface: #ffffff;
  --tradingview-grid-color: rgba(46, 46, 46, 0.06);
  --surface-glass-50: rgba(255, 255, 255, 0.5);
  --surface-glass-55: rgba(255, 255, 255, 0.55);
  --surface-glass-82: rgba(255, 255, 255, 0.82);
  --surface-glass-85: rgba(255, 255, 255, 0.85);
  --surface-glass-92: rgba(255, 255, 255, 0.92);
  --surface-glass-99: rgba(255, 255, 255, 0.99);
  --surface-blue-glass-95: rgba(238, 245, 255, 0.95);
  --border-glass-90: rgba(214, 224, 237, 0.9);
  --border-strong-glass-90: rgba(185, 200, 218, 0.9);
  --border-on-dark: rgba(214, 224, 237, 0.18);
  --glow-sky: rgba(56, 189, 248, 0.12);
  --glow-sky-strong: rgba(56, 189, 248, 0.13);
  --glow-blue: rgba(37, 99, 235, 0.1);
  --glow-blue-soft: rgba(37, 99, 235, 0.055);
  --game-glow-sky: rgba(56, 189, 248, 0.22);
  --game-grid-sky: rgba(56, 189, 248, 0.38);
  --game-border-on-dark: rgba(255, 255, 255, 0.22);
  --game-surface-on-dark: rgba(255, 255, 255, 0.08);
  --game-shadow-dark: rgba(0, 0, 0, 0.25);
  --shadow-hero: 0 1.25rem 3.5rem rgba(15, 39, 71, 0.11);
  --shadow-gateway: 0 2rem 5rem rgba(15, 39, 71, 0.14);
  --font-primary: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-numeric: "Pretendard Variable", Pretendard, "SFMono-Regular", Consolas, monospace;
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  --space-section: 4rem;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 9999px;
  --shadow-card: 0 2px 8px rgba(15, 39, 71, 0.06);
  --shadow-floating: 0 4px 14px rgba(15, 39, 71, 0.14);
  --shadow-marker: 0 2px 8px rgba(15, 39, 71, 0.22);
  --content-max: 90rem;
  --reading-max: 50rem;
  --focus-ring: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-brand-blue);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-brand-navy: #d8e8ff;
  --color-brand-navy-strong: #f1f6ff;
  --color-brand-blue-soft: #172b4d;
  --color-heading: #d8e8ff;
  --color-heading-strong: #f1f6ff;
  --color-link: #60a5fa;
  --color-link-strong: #93c5fd;
  --color-ink: #f1f5f9;
  --color-body: #cbd5e1;
  --color-muted: #9fb0c5;
  --color-muted-soft: #7f91a8;
  --color-canvas: #09111f;
  --color-surface: #111c2e;
  --color-surface-soft: #162338;
  --color-surface-blue: #142846;
  --color-surface-header: #1b2b42;
  --color-border: #2c405b;
  --color-border-strong: #46617f;
  --color-baseline: #e5edf7;
  --color-on-baseline: #09111f;
  --color-low: #60a5fa;
  --color-low-soft: #3b82f6;
  --color-high: #fb923c;
  --color-high-soft: #fdba74;
  --color-high-surface: #3a2417;
  --color-high-text: #fdba74;
  --color-current-soft: #123922;
  --color-current-border: #2f8f57;
  --color-current-text: #4ade80;
  --color-positive-text: #4ade80;
  --color-negative-text: #f87171;
  --color-price-low: #c4b5fd;
  --color-price-low-guide: rgba(196, 181, 253, 0.48);
  --color-price-high: #fbbf24;
  --color-price-high-guide: rgba(251, 191, 36, 0.48);
  --color-cycle-1: var(--color-low);
  --color-cycle-2: var(--color-high-soft);
  --color-cycle-3: var(--color-current-text);
  --color-cycle-4: var(--color-price-low);
  --color-warning-soft: #3a2a12;
  --color-warning-surface: #2d2416;
  --color-warning-text: #fbbf24;
  --color-body-contrast: #f8fafc;
  --color-muted-contrast: #d7e1ee;
  --color-border-contrast: #7890ad;
  --color-border-strong-contrast: #a8bad0;
  --color-browser-theme: #09111f;
  --surface-glass-50: rgba(17, 28, 46, 0.5);
  --surface-glass-55: rgba(17, 28, 46, 0.55);
  --surface-glass-82: rgba(17, 28, 46, 0.82);
  --surface-glass-85: rgba(17, 28, 46, 0.85);
  --surface-glass-92: rgba(17, 28, 46, 0.92);
  --surface-glass-99: rgba(17, 28, 46, 0.99);
  --surface-blue-glass-95: rgba(20, 40, 70, 0.95);
  --border-glass-90: rgba(44, 64, 91, 0.9);
  --border-strong-glass-90: rgba(70, 97, 127, 0.9);
  --border-on-dark: rgba(203, 213, 225, 0.24);
  --glow-sky: rgba(56, 189, 248, 0.08);
  --glow-sky-strong: rgba(56, 189, 248, 0.16);
  --glow-blue: rgba(59, 130, 246, 0.12);
  --glow-blue-soft: rgba(59, 130, 246, 0.1);
  --shadow-hero: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.28);
  --shadow-gateway: 0 2rem 5rem rgba(0, 0, 0, 0.36);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-floating: 0 4px 14px rgba(0, 0, 0, 0.32);
  --shadow-marker: 0 2px 8px rgba(0, 0, 0, 0.38);
  --tradingview-grid-color: rgba(203, 213, 225, 0.08);
}