:root[data-theme="light"] {
    --color-surface-999: #ffffff;
    --color-surface-990: #fdfdff;
    --color-surface-980: #ebf3fd;
    --color-surface-960: #ebf3fd;
    --color-surface-900: #fdfdff;
    --color-surface-400: #2563eb;
    --color-text-900: #e0e0e0;
    --color-text-400: #64748b;
    --color-text-300: #334155;
    --color-text-200: #0f172a;
}

:root[data-theme="dark"] {
    --color-surface-999: #1e293b;
    --color-surface-990: #0e2d75;
    --color-surface-980: #111827;
    --color-surface-960: #172554;
    --color-surface-900: #0f172a;
    --color-surface-400: #2563eb;
    --color-text-900: #49457e;
    --color-text-400: #94a3b8;
    --color-text-300: #e2e8f0;
    --color-text-200: #f8fafc;
}

:root {
    --font-family: 'Inter', sans-serif;
    --radius: 16px;
    --primary: var(--color-surface-400);
    --bg-color-1: var(--color-surface-990);
    --bg-color-2: var(--color-surface-980);
    --bg-color-3: var(--color-surface-999);
    --bg-color-th-1: 0%;
    --bg-color-th-2: 25%;
    --bg-color-th-3: 50%;
    --bg-light: var(--color-surface-900);
    --bg-color-header: color-mix(in srgb, var(--color-surface-999) 90%, transparent);
    --border-header: var(--color-text-900);
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --text-light: var(--color-text-400);
    --secondary: var(--color-text-200);
    --text-main: var(--color-text-300);
}