:root {
    color-scheme: light;
    --background: #f6f7f9;
    --surface: #ffffff;
    --header: #202124;
    --sidebar: #202124;
    --border: #e5e7eb;
    --text: #111827;
    --header-text: #ffffff;
    --sidebar-text: #ffffff;
    --text-muted: color-mix(in srgb, var(--text) 62%, var(--surface));
    --text-soft: color-mix(in srgb, var(--text) 46%, var(--surface));
    --border-strong: color-mix(in srgb, var(--border) 72%, var(--text));
    --surface-muted: color-mix(in srgb, var(--text) 4%, var(--surface));
    --header-hover: color-mix(in srgb, var(--header-text) 7%, var(--header));
    --sidebar-hover: color-mix(in srgb, var(--sidebar-text) 6%, var(--sidebar));
    --primary-color: #2563eb;
    --on-primary: #ffffff;
    --secondary-color: #0f172a;
    --on-secondary: #ffffff;
    --accent-color: #2563eb;
    --on-accent: #ffffff;
    --danger-color: #dc2626;
}

[data-theme="light"] {
    color-scheme: light;
    --background: #f6f7f9;
    --surface: #ffffff;
    --header: #202124;
    --sidebar: #202124;
    --border: #e5e7eb;
    --text: #111827;
    --header-text: #ffffff;
    --sidebar-text: #ffffff;
    --text-muted: color-mix(in srgb, var(--text) 62%, var(--surface));
    --text-soft: color-mix(in srgb, var(--text) 46%, var(--surface));
    --border-strong: color-mix(in srgb, var(--border) 72%, var(--text));
    --surface-muted: color-mix(in srgb, var(--text) 4%, var(--surface));
    --header-hover: color-mix(in srgb, var(--header-text) 7%, var(--header));
    --sidebar-hover: color-mix(in srgb, var(--sidebar-text) 6%, var(--sidebar));
    --primary-color: #2563eb;
    --on-primary: #ffffff;
    --secondary-color: #0f172a;
    --on-secondary: #ffffff;
    --accent-color: #2563eb;
    --on-accent: #ffffff;
    --danger-color: #dc2626;
}

[data-theme="dark"] {
    color-scheme: dark;
    --background: #0f1115;
    --surface: #171a21;
    --header: #202124;
    --sidebar: #202124;
    --border: #2a2f3a;
    --text: #ffffff;
    --header-text: #ffffff;
    --sidebar-text: #ffffff;
    --text-muted: color-mix(in srgb, var(--text) 62%, var(--surface));
    --text-soft: color-mix(in srgb, var(--text) 46%, var(--surface));
    --border-strong: color-mix(in srgb, var(--border) 72%, var(--text));
    --surface-muted: color-mix(in srgb, var(--text) 4%, var(--surface));
    --header-hover: color-mix(in srgb, var(--header-text) 7%, var(--header));
    --sidebar-hover: color-mix(in srgb, var(--sidebar-text) 6%, var(--sidebar));
    --primary-color: #2563eb;
    --on-primary: #ffffff;
    --secondary-color: #0f172a;
    --on-secondary: #ffffff;
    --accent-color: #2563eb;
    --on-accent: #ffffff;
    --danger-color: #fb923c;
}