/* Explicit dark theme tokens (avoid implicit default assumptions) */
:root[data-theme="dark"] {
    --color-secondary: #0E1118;
    --color-secondary-alt: #EAF1FF;

    --color-support: #4A4D56;
    --color-support-alt: #B6BED7;

    --color-accent: #22293A;
    --color-deep-sapphire-blue: #0A2852;

    --background-under-review-dark: #393320;
    --background-unavailable-dark: #312014;
    --background-approved-dark: #0C1F3B;
    --background-rejected-dark: #3A2434;

    --color-background-light: #000000;
    --color-white: #FFFFFF;
    --color-background-dark: #000000;
    --color-black: #000000;

    --navbar-profile-info-gradient: linear-gradient(135deg, rgba(1, 107, 255, 0.30) 0%, rgba(14, 17, 24, 0.85) 100%);
    --navbar-profile-info-overlay: rgba(14, 17, 24, 0.30);
    --banner-camera-icon-background: rgba(0, 0, 0, 0.75);

    --textarea-scrollbar-track: #0E1118;
    --textarea-scrollbar-thumb: #4A4D56;

    --settings-session-badge-background: rgba(1, 107, 255, 0.15);
    --settings-session-badge-text: #7FB2FF;
    --settings-toggle-light-off: #BEBEBE;
    --settings-toggle-light-on: #9B9B9B;
    --settings-toggle-dark-off: #4B4B4B;
    --settings-toggle-dark-on: #717171;
}

/* Light theme */
:root[data-theme="light"] {
    --color-secondary: #EAF1FF;
    --color-secondary-alt: #0E1118;

    --color-support: #B6BED7;
    --color-support-alt: #4A4D56;

    --color-accent: #C1D4FA;
    --color-deep-sapphire-blue: #C1D4FA;

    --background-under-review-dark: #FFF4DE;
    --background-unavailable-dark: #FFD3B3;
    --background-approved-dark: #C8E3FF;
    --background-rejected-dark: #FFE2E5;

    --color-background-light: #000000;
    --color-white: #000000;
    --color-background-dark: #FFFFFF;
    --color-black: #FFFFFF;

    --navbar-profile-info-gradient: linear-gradient(135deg, rgba(1, 107, 255, 0.22) 0%, rgba(193, 212, 250, 0.95) 100%);
    --navbar-profile-info-overlay: rgba(234, 241, 255, 0.45);
    --banner-camera-icon-background: rgba(14, 17, 24, 0.62);

    --textarea-scrollbar-track: #EAF1FF;
    --textarea-scrollbar-thumb: #B6BED7;

    --settings-session-badge-background: rgba(1, 107, 255, 0.12);
    --settings-session-badge-text: #0057D0;
    --settings-toggle-light-off: #AEB8CD;
    --settings-toggle-light-on: #8FA4C8;
    --settings-toggle-dark-off: #8D98B1;
    --settings-toggle-dark-on: #6D7EA0;
}

html.theme-init *,
html.theme-init *::before,
html.theme-init *::after {
    transition: none !important;
}

/* Apply transitions for smooth theme switching */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Icon styling for light theme */
[data-theme="light"] .icon--white svg path {
    fill: #0E1118;
}

.a21-flash-banner {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1200;
    max-width: min(420px, calc(100vw - 36px));
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-accent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
}

.a21-flash-banner__text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-b-14);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
}

.a21-flash-banner--success {
    background: rgba(1, 107, 255, 0.16);
    color: var(--color-secondary-alt);
}

.a21-flash-banner--error {
    background: rgba(181, 0, 0, 0.12);
    color: var(--color-secondary-alt);
}

[data-theme="light"] .a21-flash-banner--success {
    background: rgba(1, 107, 255, 0.10);
    color: var(--color-secondary-alt);
}

[data-theme="light"] .a21-flash-banner--error {
    background: rgba(181, 0, 0, 0.08);
    color: var(--color-secondary-alt);
}

@media (max-width: 768px) {
    .a21-flash-banner {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}