/* Shared two-theme layer. Keep page-specific layout CSS separate from brand colors. */
html[data-theme="arth"] {
    --g-900: #082d49;
    --g-800: #10395c;
    --g-700: #286f79;
    --g-600: #4d9f96;
    --g-500: #7fc8b4;
    --g-400: #9fd8c8;
    --g-300: #bfe6da;
    --g-200: #d8f0e9;
    --g-100: #e8f7f2;
    --g-50: #f3fbf8;
    --t-700: #10395c;
    --t-600: #286f79;
    --t-500: #4d9f96;
    --t-400: #7fc8b4;
    --t-100: #e8f7f2;
    --t-50: #f3fbf8;
    --s-ink: #082d49;
    --s-deep: #10395c;
    --s-mid: #174c68;
    --s-lite: #286f79;
    --success-dark: #286f79;
    --success: #4d9f96;
    --success-light: #e8f7f2;
    --info-dark: #10395c;
    --info: #4d9f96;
    --info-light: #e8f7f2;
    --indigo-950: #082d49;
    --indigo-900: #10395c;
    --indigo-600: #286f79;
    --indigo-500: #4d9f96;
    --indigo-400: #7fc8b4;
    --indigo-200: #d8f0e9;
    --indigo-100: #e8f7f2;
    --indigo-50: #f3fbf8;
    --violet-700: #10395c;
    --violet-600: #286f79;
    --violet-500: #4d9f96;
    --violet-100: #e8f7f2;
    --violet-50: #f3fbf8;
    --emerald-700: #286f79;
    --emerald-600: #4d9f96;
    --emerald-500: #7fc8b4;
    --emerald-400: #9fd8c8;
    --emerald-100: #e8f7f2;
    --emerald-50: #f3fbf8;
    --blue-600: #286f79;
    --blue-50: #f3fbf8;
    --green-600: #4d9f96;
    --green-50: #f3fbf8;

    /* Standalone onboarding/submitted aliases. */
    --navy: #10395c;
    --navy2: #082d49;
    --navy3: #174c68;
    --blue: #286f79;
    --blue2: #10395c;
    --blue3: #7fc8b4;
    --green: #7fc8b4;
    --green2: #4d9f96;
    --green3: #bfe6da;
    --green4: #d8f0e9;
    --teal: #4d9f96;
    --teal2: #286f79;
}

.theme-switch {
    position: relative;
    width: 46px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(16,57,92,.2);
    border-radius: 999px;
    background: #e7eef3;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.theme-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 2px 6px rgba(10,42,108,.28);
    transition: transform .2s ease, background .2s ease;
}

.theme-switch:hover,
.theme-switch:focus-visible {
    border-color: #7fc8b4;
    box-shadow: 0 0 0 3px rgba(127,200,180,.2);
    outline: none;
}

html[data-theme="arth"] .theme-switch {
    background: #d8f0e9;
    border-color: rgba(77,159,150,.45);
}

html[data-theme="arth"] .theme-switch::after {
    transform: translateX(22px);
    background: #10395c;
}

.theme-switch-login {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 30;
}

.submitted-page .theme-switch {
    margin-left: auto;
}

.submitted-page .topbar-badge {
    margin-left: 0;
}

html[data-theme="arth"] .sidebar {
    background: linear-gradient(170deg, #082d49 0%, #10395c 54%, #286f79 100%);
}

html[data-theme="arth"] .login-hero,
html[data-theme="arth"] .submitted-page {
    background: radial-gradient(ellipse 60% 50% at 20% 10%, rgba(127,200,180,.28), transparent 60%),
        radial-gradient(ellipse 50% 50% at 85% 90%, rgba(77,159,150,.26), transparent 65%),
        linear-gradient(135deg, #082d49 0%, #10395c 48%, #286f79 100%);
}

html[data-theme="arth"] .client-create-page .topbar,
html[data-theme="arth"] .submitted-page .topbar {
    background: linear-gradient(135deg, #082d49 0%, #10395c 58%, #286f79 100%);
}

html[data-theme="arth"] .client-create-page .page-header {
    background: linear-gradient(140deg, #082d49 0%, #10395c 60%, #286f79 100%);
}

html[data-theme="arth"] .btn-primary,
html[data-theme="arth"] .btn-login {
    background: linear-gradient(135deg, #4d9f96, #7fc8b4);
}

@media (max-width: 640px) {
    .theme-switch {
        width: 42px;
        height: 22px;
    }

    .theme-switch::after {
        top: 3px;
        width: 14px;
        height: 14px;
    }

    html[data-theme="arth"] .theme-switch::after {
        transform: translateX(20px);
    }

    .theme-switch-login {
        top: 25px;
        right: 20px;
        border-color: rgba(255,255,255,.48);
        background: rgba(255,255,255,.24);
        box-shadow: 0 6px 18px rgba(0,0,0,.14);
    }

    .theme-switch-login::after {
        background: #fff;
    }

    html[data-theme="arth"] .theme-switch-login {
        border-color: rgba(255,255,255,.48);
        background: rgba(255,255,255,.24);
    }

    html[data-theme="arth"] .theme-switch-login::after {
        background: #fff;
    }
}