@layer base {
    :root {
        color-scheme: light dark;

        --accent-hue: 250;
        --brand-hue: var(--accent-hue);
        --brand-chroma: 0.18;
        --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-display: var(--font-sans);
        --platform-light-bg: #DCDCDC;
        --platform-dark-bg: #696969;

        --bg: var(--platform-light-bg);
        --login-bg: var(--platform-light-bg);
        --login-bg-grad: none;
        --surface: #ffffff;
        --surface-strong: #ffffff;
        --surface-variant: #eef2f6;
        --on-surface: #111827;
        --on-surface-variant: #4b5563;

        --primary: #0b7bd3;
        --on-primary: #ffffff;
        --primary-container: #e7f1fb;
        --on-primary-container: #15476f;

        --outline: #cfd8e3;
        --outline-variant: #e3e8ef;

        --error: #dc2626;
        --success: #16a34a;
        --warning: #f5a623;
        --info: #2563eb;

        --radius-xs: 0.25rem;
        --radius-sm: 0.375rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.5rem;
        --radius-pill: 9999px;

        --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
        --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
        --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);

        --spacing-xs: 0.5rem;
        --spacing-sm: 0.75rem;
        --spacing-md: clamp(0.75rem, 2vi, 1.25rem);
        --spacing-lg: clamp(1.25rem, 4vi, 2.25rem);

        --ease-standard: cubic-bezier(0.25, 1, 0.5, 1);
        --ease-elastic: var(--ease-standard);
    }

    :root[data-theme="light"] {
        color-scheme: light;
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
        --bg: var(--platform-dark-bg);
        --login-bg: var(--platform-dark-bg);
        --login-bg-grad: none;
        --surface: #1f2630;
        --surface-strong: #252d38;
        --surface-variant: #303946;
        --on-surface: #f3f4f6;
        --on-surface-variant: #c5ccd6;

        --primary: #58a6e8;
        --on-primary: #07131f;
        --primary-container: #173b59;
        --on-primary-container: #d9ecfb;

        --outline: #4b5563;
        --outline-variant: #374151;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
        --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.35);
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            color-scheme: dark;
            --bg: var(--platform-dark-bg);
            --login-bg: var(--platform-dark-bg);
            --login-bg-grad: none;
            --surface: #1f2630;
            --surface-strong: #252d38;
            --surface-variant: #303946;
            --on-surface: #f3f4f6;
            --on-surface-variant: #c5ccd6;

            --primary: #58a6e8;
            --on-primary: #07131f;
            --primary-container: #173b59;
            --on-primary-container: #d9ecfb;

            --outline: #4b5563;
            --outline-variant: #374151;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
            --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.35);
        }
    }

    body:has(#platform-theme-light:checked) {
        color-scheme: light;
        --bg: var(--platform-light-bg);
        --login-bg: var(--platform-light-bg);
        --login-bg-grad: none;
        --surface: #ffffff;
        --surface-strong: #ffffff;
        --surface-variant: #eef2f6;
        --on-surface: #111827;
        --on-surface-variant: #4b5563;
        --primary: #0b7bd3;
        --on-primary: #ffffff;
        --primary-container: #e7f1fb;
        --on-primary-container: #15476f;
        --outline: #cfd8e3;
        --outline-variant: #e3e8ef;
        --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
        --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
        --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);
    }

    body:has(#platform-theme-dark:checked) {
        color-scheme: dark;
        --bg: var(--platform-dark-bg);
        --login-bg: var(--platform-dark-bg);
        --login-bg-grad: none;
        --surface: #1f2630;
        --surface-strong: #252d38;
        --surface-variant: #303946;
        --on-surface: #f3f4f6;
        --on-surface-variant: #c5ccd6;
        --primary: #58a6e8;
        --on-primary: #07131f;
        --primary-container: #173b59;
        --on-primary-container: #d9ecfb;
        --outline: #4b5563;
        --outline-variant: #374151;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
        --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.35);
    }

    .theme-toggle-wrapper {
        background: var(--surface);
        border: 1px solid var(--outline);
        border-radius: var(--radius-pill);
        padding: 0.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        box-shadow: var(--shadow-sm);
    }

    .theme-choice {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .theme-choice-label {
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--on-surface);
        cursor: pointer;
        transition: transform 0.3s var(--ease-standard), background-color 0.3s var(--ease-standard), color 0.3s var(--ease-standard);
    }

    .theme-choice-label:hover {
        transform: rotate(12deg) scale(1.08);
        background: var(--surface-variant);
        color: var(--primary);
    }

    .theme-choice:focus-visible + .theme-choice-label {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
    }

    .theme-choice:checked + .theme-choice-label {
        background: var(--primary);
        color: var(--on-primary);
    }

    :root[data-theme="light"] body:not(:has(.theme-choice:checked)) .theme-choice-label[for="platform-theme-light"],
    :root[data-theme="dark"] body:not(:has(.theme-choice:checked)) .theme-choice-label[for="platform-theme-dark"] {
        background: var(--primary);
        color: var(--on-primary);
    }

    @media (prefers-color-scheme: light) {
        :root:not([data-theme]) body:not(:has(.theme-choice:checked)) .theme-choice-label[for="platform-theme-light"] {
            background: var(--primary);
            color: var(--on-primary);
        }
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme]) body:not(:has(.theme-choice:checked)) .theme-choice-label[for="platform-theme-dark"] {
            background: var(--primary);
            color: var(--on-primary);
        }
    }
}