:root,
::backdrop {
    color-scheme: light;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --control-sm: 34px;
    --control-md: 40px;
    --control-lg: 46px;
    --page-max-width: 1420px;
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-surface-2: #f4f4f4;
    --c-surface-3: #e9e9e9;
    --c-line: #ebebeb;
    --c-line-strong: #d6d6d6;
    --c-text: #111111;
    --c-text-2: #3d3d3d;
    --c-muted: #666666;
    --c-subtle: #767676;
    --c-faint: #a3a3a3;
    --c-tint: #111111;
    --c-inverse: #111111;
    --c-on-solid: #ffffff;
    --c-knob: #ffffff;
    --c-on-scrim: #ffffff;
    --c-accent: #cc4e00;
    --c-accent-2: #a94100;
    --c-accent-strong: #a94100;
    --c-accent-solid: #cc4e00;
    --c-accent-soft: #fff7ed;
    --c-accent-line: #ffdfb5;
    --c-brand: #cc4e00;
    --c-brand-2: #a94100;
    --c-brand-strong: #a94100;
    --c-brand-solid: #cc4e00;
    --c-brand-soft: #fff7ed;
    --c-brand-line: #ffdfb5;
    --c-brand-vivid: #f76b15;
    --c-blue: #2563eb;
    --c-blue-2: #1d4ed8;
    --c-blue-strong: #1d4ed8;
    --c-blue-solid: #2563eb;
    --c-blue-soft: #eff6ff;
    --c-blue-line: #bfdbfe;
    --c-green: #059669;
    --c-green-2: #047857;
    --c-green-strong: #047857;
    --c-green-solid: #059669;
    --c-green-soft: #ecfdf5;
    --c-green-line: #a7f3d0;
    --c-danger: #dc2626;
    --c-danger-solid: #dc2626;
    --c-danger-soft: #fee2e2;
    --c-success: #047857;
    --c-success-solid: #047857;
    --c-success-soft: #d1fae5;
    --c-warning: #b45309;
    --c-warning-solid: #b45309;
    --c-warning-soft: #fef3c7;
    --c-info: #1d4ed8;
    --c-info-solid: #2563eb;
    --c-info-soft: #dbeafe;
    --c-chart-1: #3b82f6;
    --c-chart-2: #10b981;
    --c-chart-3: #a855f7;
    --c-meter-low: #16a34a;
    --c-meter-mid: #eab308;
    --c-meter-high: #dc2626;
    --c-banner-mint: #047857;
    --c-banner-mint-solid: #047857;
    --c-banner-blue: #1d4ed8;
    --c-banner-blue-solid: #2563eb;
    --c-banner-rose: #be123c;
    --c-banner-rose-solid: #e11d48;
    --c-grade-exclusive: #6550b9;
    --c-grade-official: #0d74ce;
    --c-grade-popular: #c2298a;
    --c-grade-general: #008573;
    --c-orb: #e8590c;
    --c-orb-glow: #ffc078;
    --c-shadow: rgb(0 0 0 / 0.16);
    --c-scrim: #111111;
    --c-tone-keep: 55%;
    --c-backdrop: rgb(0 0 0 / 0.4);
    --c-choice-track: var(--c-surface-2);
    --c-choice-active: var(--c-surface);
    --c-google: #ffffff;
    --c-google-line: #dadce0;
    --c-google-text: #1f1f1f;
    --c-kakao: #fee500;
    --c-kakao-text: rgb(0 0 0 / 0.85);
}

:root[data-theme='dark'],
:root[data-theme='dark'] ::backdrop,
.theme-dark,
.theme-dark::backdrop {
    color-scheme: dark;
    --c-bg: #0f0f10;
    --c-surface: #18181a;
    --c-surface-2: #212124;
    --c-surface-3: #333337;
    --c-line: #29292c;
    --c-line-strong: #3b3b3f;
    --c-text: #f4f4f5;
    --c-text-2: #d4d4d6;
    --c-muted: #a1a1a6;
    --c-subtle: #8b8b90;
    --c-faint: #6b6b70;
    --c-tint: #f4f4f5;
    --c-inverse: #f4f4f5;
    --c-on-solid: #111111;
    --c-knob: #ffffff;
    --c-on-scrim: #ffffff;
    --c-accent: #ff801f;
    --c-accent-2: #ffa057;
    --c-accent-strong: #ff801f;
    --c-accent-solid: #f76b15;
    --c-accent-soft: #2a1a0d;
    --c-accent-line: #5a3315;
    --c-brand: #ff801f;
    --c-brand-2: #ffa057;
    --c-brand-strong: #ff801f;
    --c-brand-solid: #f76b15;
    --c-brand-soft: #2a1a0d;
    --c-brand-line: #5a3315;
    --c-brand-vivid: #f76b15;
    --c-blue: #60a5fa;
    --c-blue-2: #93c5fd;
    --c-blue-strong: #3b82f6;
    --c-blue-solid: #3b82f6;
    --c-blue-soft: #172036;
    --c-blue-line: #1e3a8a;
    --c-green: #34d399;
    --c-green-2: #6ee7b7;
    --c-green-strong: #10b981;
    --c-green-solid: #10b981;
    --c-green-soft: #0f2a22;
    --c-green-line: #065f46;
    --c-danger: #f87171;
    --c-danger-solid: #ef4444;
    --c-danger-soft: #2c1517;
    --c-success: #34d399;
    --c-success-solid: #10b981;
    --c-success-soft: #0f2a22;
    --c-warning: #fbbf24;
    --c-warning-solid: #f59e0b;
    --c-warning-soft: #2b2210;
    --c-info: #60a5fa;
    --c-info-solid: #3b82f6;
    --c-info-soft: #172036;
    --c-chart-1: #60a5fa;
    --c-chart-2: #34d399;
    --c-chart-3: #c084fc;
    --c-meter-low: #22c55e;
    --c-meter-mid: #facc15;
    --c-meter-high: #ef4444;
    --c-banner-mint: #34d399;
    --c-banner-mint-solid: #10b981;
    --c-banner-blue: #60a5fa;
    --c-banner-blue-solid: #3b82f6;
    --c-banner-rose: #fb7185;
    --c-banner-rose-solid: #f43f5e;
    --c-grade-exclusive: #baa7ff;
    --c-grade-official: #70b8ff;
    --c-grade-popular: #ff8dcc;
    --c-grade-general: #0bd8b6;
    --c-orb: #ff8a3d;
    --c-orb-glow: #ffe0b8;
    --c-shadow: #000000;
    --c-scrim: #000000;
    --c-tone-keep: 100%;
    --c-backdrop: rgb(0 0 0 / 0.7);
    --c-choice-track: var(--c-bg);
    --c-choice-active: var(--c-surface-3);
    --c-google: #131314;
    --c-google-line: #8e918f;
    --c-google-text: #e3e3e3;
}

.theme-dark {
    color: var(--c-text);
}