/**
 * Color theme overrides.
 * Default (:root) = Nyafilmer dark purple. Themes override semantic tokens via [data-theme].
 */

/* ── Shared light-mode tokens (base light + auto) ── */
html[data-theme="light"],
html[data-theme="peach"],
html[data-theme="cloud"] {
    color-scheme: light;

    --color-bg-base: #eef0f6;
    --color-bg-gradient-inner: #e4e7f0;
    --color-bg-gradient-outer: #d8dce8;
    --color-bg-gradient-start: #e8ebf2;
    --color-bg-surface: #ffffff;
    --color-bg-elevated: #f6f7fb;
    --color-bg-card: #ffffff;
    --color-bg-deep: #e0e4ef;
    --color-bg-deep-alt: #e8ebf4;
    --color-bg-input: #f3f5fa;
    --color-bg-code: #eceef4;
    --color-bg-blockquote: #e8ebf2;
    --color-bg-header: #ffffff;
    --color-bg-panel: #f3f5fa;
    --color-bg-muted: #eceef4;
    --color-bg-item: #f0f2f8;
    --color-bg-overlay: #f6f7fb;
    --color-bg-hover-dark: #e4e7f0;
    --color-bg-subtle: #f0f2f8;
    --color-bg-footer: #e8ebf2;

    --color-text: #3d4258;
    --color-text-alt: #4a5068;
    --color-text-muted: #5c6378;
    --color-text-subtle: #6e7588;
    --color-text-heading: #222633;
    --color-text-light: #2e3344;
    --color-text-secondary: #4a5068;
    --color-text-tertiary: #6a7084;
    --color-text-nav: #2a2f42;
    --color-nav-link: #f0eeff;
    --color-nav-link-hover: #ffffff;
    --color-text-muted-purple: #5a5480;
    --color-text-lavender: #4e4870;
    --color-text-bright-lavender: #2e2848;

    --color-on-primary: #ffffff;
    --color-on-primary-muted: #f0eeff;
    --color-on-surface: #2e3344;
    --color-text-pricing: #4a4568;
    --color-gray-80: #5c5092;
    --color-bg-purple-tint: #ede9f6;
    --color-gray-750: #d8dce8;
    --color-bg-dark: #e8ebf2;
    --color-gray-850: #d4d8e6;
    --color-gray-700: #4a5068;

    --color-primary: #7a6eb5;
    --color-primary-dark: #6a5ea3;
    --color-primary-darker: #f0f2f8;
    --color-primary-deeper: #5c5092;
    --color-primary-muted: #9a8fc8;
    --color-primary-surface: #ede9f6;
    --color-primary-shadow: #a89fd4;

    --color-accent: #6b8f28;
    --color-accent-bright: #8aaa32;
    --color-accent-lime: #7a9a30;
    --color-accent-purple: #453a72;
    --color-accent-purple-light: #52467f;
    --color-accent-purple-muted: #3a3062;
    --color-accent-purple-pale: #655a9a;

    --color-link: #1a6fa8;
    --color-link-hover: #6a5ea3;
    --color-link-alt: #2a7ab8;

    --color-border: #d4d8e6;
    --color-border-alt: #c8cce0;
    --color-border-dark: #b8bdd0;
    --color-border-light: #c0c5d6;
    --color-border-subtle: #dce0ec;
    --color-border-divider: #e0e4f0;
    --color-border-nav: #d0d4e4;
    --color-border-nav-alt: #c8cce0;
    --color-border-muted: #a8aec4;
    --color-border-faint: #d8dce8;
    --color-border-button: #c0c5d6;

    --color-gold: #9a7a18;
    --color-gold-bright: #b8860b;

    --color-home-search-bg: #ffffff;
    --color-home-search-text: #3d4258;

    --overlay-black-light: rgba(0, 0, 0, 0.06);
    --overlay-black-08: rgba(0, 0, 0, 0.05);
    --overlay-black-12: rgba(0, 0, 0, 0.07);
    --overlay-black-20: rgba(0, 0, 0, 0.08);
    --overlay-black-21: rgba(0, 0, 0, 0.08);
    --overlay-black-22: rgba(0, 0, 0, 0.09);
    --overlay-black-23: rgba(0, 0, 0, 0.1);
    --overlay-black-shadow: rgba(0, 0, 0, 0.12);
    --overlay-black-30: rgba(0, 0, 0, 0.14);
    --overlay-black-medium: rgba(0, 0, 0, 0.18);
    --overlay-black-strong: rgba(0, 0, 0, 0.35);
    --overlay-separator: rgba(0, 0, 0, 0.08);
    --overlay-modal: rgba(0, 0, 0, 0.25);
    --overlay-modal-shadow: rgba(0, 0, 0, 0.15);
    --overlay-panel: rgba(255, 255, 255, 0.96);
    --overlay-purple: rgba(122, 110, 181, 0.1);
    --overlay-purple-hover: rgba(122, 110, 181, 0.16);
    --overlay-primary: rgba(122, 110, 181, 0.88);
    --overlay-primary-light: rgba(122, 110, 181, 0.2);
    --overlay-primary-faint: rgba(122, 110, 181, 0.12);
    --overlay-white-light: rgba(0, 0, 0, 0.04);
    --overlay-white-medium: rgba(0, 0, 0, 0.06);
    --overlay-white-faint: rgba(0, 0, 0, 0.03);
    --overlay-white-subtle: rgba(0, 0, 0, 0.05);
    --overlay-white-placeholder: rgba(0, 0, 0, 0.3);
    --overlay-dark-41: rgba(0, 0, 0, 0.2);
    --overlay-dark-68: rgba(0, 0, 0, 0.3);
    --overlay-dark-79: rgba(0, 0, 0, 0.35);
    --overlay-dark-90: rgba(0, 0, 0, 0.4);
    --overlay-dark-panel: rgba(0, 0, 0, 0.25);
    --overlay-avatar: rgba(0, 0, 0, 0.08);
    --overlay-nav-inset: rgba(0, 0, 0, 0.06);
}

/* Auto: follow system preference */
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] {
        color-scheme: light;

        --color-bg-base: #eef0f6;
        --color-bg-gradient-inner: #e4e7f0;
        --color-bg-gradient-outer: #d8dce8;
        --color-bg-gradient-start: #e8ebf2;
        --color-bg-surface: #ffffff;
        --color-bg-elevated: #f6f7fb;
        --color-bg-card: #ffffff;
        --color-bg-deep: #e0e4ef;
        --color-bg-deep-alt: #e8ebf4;
        --color-bg-input: #f3f5fa;
        --color-bg-code: #eceef4;
        --color-bg-blockquote: #e8ebf2;
        --color-bg-header: #ffffff;
        --color-bg-panel: #f3f5fa;
        --color-bg-muted: #eceef4;
        --color-bg-item: #f0f2f8;
        --color-bg-overlay: #f6f7fb;
        --color-bg-hover-dark: #e4e7f0;
        --color-bg-subtle: #f0f2f8;
        --color-bg-footer: #e8ebf2;

        --color-text: #3d4258;
        --color-text-alt: #4a5068;
        --color-text-muted: #5c6378;
        --color-text-subtle: #6e7588;
        --color-text-heading: #222633;
        --color-text-light: #2e3344;
        --color-text-secondary: #4a5068;
        --color-text-tertiary: #6a7084;
        --color-text-nav: #2a2f42;
    --color-nav-link: #f0eeff;
    --color-nav-link-hover: #ffffff;
        --color-text-muted-purple: #5a5480;
        --color-text-lavender: #4e4870;
        --color-text-bright-lavender: #2e2848;

        --color-on-primary: #ffffff;
        --color-on-primary-muted: #f0eeff;
        --color-on-surface: #2e3344;
        --color-text-pricing: #4a4568;
        --color-gray-80: #5c5092;
        --color-bg-purple-tint: #ede9f6;
        --color-gray-750: #d8dce8;
        --color-bg-dark: #e8ebf2;
        --color-gray-850: #d4d8e6;
        --color-gray-700: #4a5068;

        --color-primary: #7a6eb5;
        --color-primary-dark: #6a5ea3;
        --color-primary-darker: #f0f2f8;
        --color-primary-deeper: #5c5092;
        --color-primary-muted: #9a8fc8;
        --color-primary-surface: #ede9f6;
        --color-primary-shadow: #a89fd4;

        --color-accent: #6b8f28;
        --color-accent-bright: #8aaa32;
        --color-accent-lime: #7a9a30;
        --color-accent-purple: #453a72;
        --color-accent-purple-light: #52467f;
        --color-accent-purple-muted: #3a3062;
        --color-accent-purple-pale: #655a9a;

        --color-link: #1a6fa8;
        --color-link-hover: #6a5ea3;
        --color-link-alt: #2a7ab8;

        --color-border: #d4d8e6;
        --color-border-alt: #c8cce0;
        --color-border-dark: #b8bdd0;
        --color-border-light: #c0c5d6;
        --color-border-subtle: #dce0ec;
        --color-border-divider: #e0e4f0;
        --color-border-nav: #d0d4e4;
        --color-border-nav-alt: #c8cce0;
        --color-border-muted: #a8aec4;
        --color-border-faint: #d8dce8;
        --color-border-button: #c0c5d6;

        --color-gold: #9a7a18;
        --color-gold-bright: #b8860b;

        --color-home-search-bg: #ffffff;
        --color-home-search-text: #3d4258;

        --overlay-black-light: rgba(0, 0, 0, 0.06);
        --overlay-black-08: rgba(0, 0, 0, 0.05);
        --overlay-black-12: rgba(0, 0, 0, 0.07);
        --overlay-black-20: rgba(0, 0, 0, 0.08);
        --overlay-black-21: rgba(0, 0, 0, 0.08);
        --overlay-black-22: rgba(0, 0, 0, 0.09);
        --overlay-black-23: rgba(0, 0, 0, 0.1);
        --overlay-black-shadow: rgba(0, 0, 0, 0.12);
        --overlay-black-30: rgba(0, 0, 0, 0.14);
        --overlay-black-medium: rgba(0, 0, 0, 0.18);
        --overlay-black-strong: rgba(0, 0, 0, 0.35);
        --overlay-separator: rgba(0, 0, 0, 0.08);
        --overlay-modal: rgba(0, 0, 0, 0.25);
        --overlay-modal-shadow: rgba(0, 0, 0, 0.15);
        --overlay-panel: rgba(255, 255, 255, 0.96);
        --overlay-purple: rgba(122, 110, 181, 0.1);
        --overlay-purple-hover: rgba(122, 110, 181, 0.16);
        --overlay-primary: rgba(122, 110, 181, 0.88);
        --overlay-primary-light: rgba(122, 110, 181, 0.2);
        --overlay-primary-faint: rgba(122, 110, 181, 0.12);
        --overlay-white-light: rgba(0, 0, 0, 0.04);
        --overlay-white-medium: rgba(0, 0, 0, 0.06);
        --overlay-white-faint: rgba(0, 0, 0, 0.03);
        --overlay-white-subtle: rgba(0, 0, 0, 0.05);
        --overlay-white-placeholder: rgba(0, 0, 0, 0.3);
        --overlay-dark-41: rgba(0, 0, 0, 0.2);
        --overlay-dark-68: rgba(0, 0, 0, 0.3);
        --overlay-dark-79: rgba(0, 0, 0, 0.35);
        --overlay-dark-90: rgba(0, 0, 0, 0.4);
        --overlay-dark-panel: rgba(0, 0, 0, 0.25);
        --overlay-avatar: rgba(0, 0, 0, 0.08);
        --overlay-nav-inset: rgba(0, 0, 0, 0.06);
    }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        color-scheme: dark;
    }
}

/* Explicit dark – matches :root defaults */
html[data-theme="dark"] {
    color-scheme: dark;
}

/* ── Peach Fuzz (Pantone 13-1023, 2024) – warm light ── */
html[data-theme="peach"] {
    --color-on-primary: #ffffff;
    --color-on-surface: #2e1e14;
    --color-bg-base: #fff5ee;
    --color-bg-gradient-inner: #ffefe4;
    --color-bg-gradient-outer: #ffe8da;
    --color-bg-gradient-start: #fff0e6;
    --color-bg-surface: #fffaf6;
    --color-bg-elevated: #fff6ef;
    --color-bg-card: #ffffff;
    --color-bg-input: #fff4eb;
    --color-bg-code: #ffefe4;
    --color-bg-blockquote: #ffefe4;
    --color-bg-header: #fffaf6;
    --color-bg-panel: #fff4eb;
    --color-bg-overlay: #fff6ef;

    --color-text: #4a3428;
    --color-text-muted: #6a5040;
    --color-text-heading: #2e1e14;
    --color-text-nav: #3a281c;
    --color-nav-link: #fff8f4;
    --color-nav-link-hover: #ffffff;
    --color-text-muted-purple: #7a5a48;

    --color-primary: #b85c38;
    --color-primary-dark: #9a4a2c;
    --color-primary-deeper: #7a3a22;
    --color-primary-muted: #d08060;
    --color-primary-surface: #ffe8da;
    --color-accent: #c87830;
    --color-accent-purple: #c07050;
    --color-accent-purple-muted: #a85840;
    --color-link: #a84828;
    --color-link-hover: #8a3820;

    --color-border: #f0d8c8;
    --color-border-dark: #e8c8b4;
    --color-border-subtle: #f8e8dc;
    --color-border-divider: #f4e0d0;

    --color-gold: #a06820;

    --color-home-search-bg: #fffaf6;
    --color-home-search-text: #4a3428;

    --overlay-purple: rgba(184, 92, 56, 0.1);
    --overlay-purple-hover: rgba(184, 92, 56, 0.16);
    --overlay-primary: rgba(184, 92, 56, 0.88);
    --overlay-primary-light: rgba(184, 92, 56, 0.2);
    --overlay-primary-faint: rgba(184, 92, 56, 0.12);
}

/* ── Cloud Dancer (Pantone 11-4201, 2026) – airy warm light ── */
html[data-theme="cloud"] {
    --color-on-primary: #ffffff;
    --color-on-surface: #222018;
    --color-bg-base: #f0eee9;
    --color-bg-gradient-inner: #eae8e2;
    --color-bg-gradient-outer: #e2e0da;
    --color-bg-gradient-start: #eceae4;
    --color-bg-surface: #faf9f6;
    --color-bg-elevated: #f6f5f1;
    --color-bg-card: #ffffff;
    --color-bg-input: #f4f3ef;
    --color-bg-code: #eceae4;
    --color-bg-blockquote: #eceae4;
    --color-bg-header: #faf9f6;
    --color-bg-panel: #f4f3ef;
    --color-bg-overlay: #f6f5f1;

    --color-text: #3a3832;
    --color-text-muted: #5a5850;
    --color-text-heading: #222018;
    --color-text-nav: #2e2c26;
    --color-nav-link: #f4f6fa;
    --color-nav-link-hover: #ffffff;
    --color-text-muted-purple: #6a6458;

    --color-primary: #5a6a7a;
    --color-primary-dark: #4a5a6a;
    --color-primary-deeper: #3a4a58;
    --color-primary-muted: #7a8a9a;
    --color-primary-surface: #e4e8ec;
    --color-accent: #7a8a5a;
    --color-accent-purple: #7a7a9a;
    --color-accent-purple-muted: #6a6a88;
    --color-link: #3a6a8a;
    --color-link-hover: #4a5a6a;

    --color-border: #d8d6d0;
    --color-border-dark: #ccc8c0;
    --color-border-subtle: #e8e6e0;
    --color-border-divider: #e4e2dc;

    --color-gold: #8a7a30;

    --color-home-search-bg: #faf9f6;
    --color-home-search-text: #3a3832;

    --overlay-purple: rgba(90, 106, 122, 0.1);
    --overlay-purple-hover: rgba(90, 106, 122, 0.16);
    --overlay-primary: rgba(90, 106, 122, 0.88);
    --overlay-primary-light: rgba(90, 106, 122, 0.2);
    --overlay-primary-faint: rgba(90, 106, 122, 0.12);
}

/* ── Mocha Mousse (Pantone 17-1230, 2025) – warm dark ── */
html[data-theme="mocha"] {
    color-scheme: dark;

    --color-bg-base: #1e1612;
    --color-bg-gradient-inner: #261c16;
    --color-bg-gradient-outer: #140e0a;
    --color-bg-surface: #2a2018;
    --color-bg-elevated: #322820;
    --color-bg-card: #1a120c;
    --color-bg-input: #241a14;
    --color-bg-code: #1c140e;
    --color-bg-blockquote: #302418;
    --color-bg-header: #261c16;
    --color-bg-panel: #2a2018;
    --color-bg-overlay: #221810;

    --color-text: #d8c8bc;
    --color-text-muted: #b8a898;
    --color-text-heading: #f0e8e0;
    --color-text-nav: #f0e4d8;
    --color-text-muted-purple: #c8b0a0;

    --color-primary: #A47864;
    --color-primary-dark: #8a6450;
    --color-primary-deeper: #6a4a38;
    --color-primary-muted: #c09078;
    --color-primary-surface: #3a2c22;
    --color-accent: #c8a060;
    --color-accent-purple: #d0a890;
    --color-accent-purple-muted: #b89078;
    --color-link: #e0b890;
    --color-link-hover: #d0a080;

    --color-border: #4a3828;
    --color-border-dark: #3a2c20;
    --color-border-subtle: #3a2c22;
    --color-border-divider: #322418;

    --color-gold: #e0c070;

    --overlay-purple: rgba(212, 168, 144, 0.12);
    --overlay-purple-hover: rgba(212, 168, 144, 0.18);
    --overlay-primary: rgba(164, 120, 100, 0.9);
    --overlay-primary-light: rgba(164, 120, 100, 0.35);
    --overlay-primary-faint: rgba(164, 120, 100, 0.25);
}

/* ── Very Peri (Pantone 17-3938, 2022) – blue-purple dark ── */
html[data-theme="peri"] {
    color-scheme: dark;

    --color-bg-base: #141628;
    --color-bg-gradient-inner: #1a1e34;
    --color-bg-gradient-outer: #0e1020;
    --color-bg-surface: #1e2240;
    --color-bg-elevated: #242848;
    --color-bg-card: #12142a;
    --color-bg-input: #181c34;
    --color-bg-code: #141830;
    --color-bg-blockquote: #222648;
    --color-bg-header: #1a1e34;
    --color-bg-panel: #1e2240;
    --color-bg-overlay: #1a1c36;

    --color-text: #b8bce0;
    --color-text-muted: #9498c0;
    --color-text-heading: #e0e4f8;
    --color-text-nav: #d8dcf0;
    --color-text-muted-purple: #a8acd0;

    --color-primary: #6667AB;
    --color-primary-dark: #5254a0;
    --color-primary-deeper: #404888;
    --color-primary-muted: #8888c0;
    --color-primary-surface: #2a2e58;
    --color-accent: #8a9ad0;
    --color-accent-purple: #a0a4d8;
    --color-accent-purple-muted: #8888c8;
    --color-link: #88b0e8;
    --color-link-hover: #a0a4d8;

    --color-border: #343860;
    --color-border-dark: #2a2e50;
    --color-border-subtle: #2a2e52;
    --color-border-divider: #222648;

    --color-gold: #d0c878;

    --overlay-purple: rgba(160, 164, 216, 0.12);
    --overlay-purple-hover: rgba(160, 164, 216, 0.18);
    --overlay-primary: rgba(102, 103, 171, 0.9);
    --overlay-primary-light: rgba(102, 103, 171, 0.35);
    --overlay-primary-faint: rgba(102, 103, 171, 0.25);
}

/* ── Viva Magenta (Pantone 18-1750, 2023) – rich magenta dark ── */
html[data-theme="magenta"] {
    color-scheme: dark;

    --color-bg-base: #1a0c14;
    --color-bg-gradient-inner: #221018;
    --color-bg-gradient-outer: #10080c;
    --color-bg-surface: #2a1420;
    --color-bg-elevated: #321828;
    --color-bg-card: #140a10;
    --color-bg-input: #1e1018;
    --color-bg-code: #180c12;
    --color-bg-blockquote: #2e1824;
    --color-bg-header: #221018;
    --color-bg-panel: #2a1420;
    --color-bg-overlay: #1e1018;

    --color-text: #d8b8c8;
    --color-text-muted: #b898a8;
    --color-text-heading: #f0e0e8;
    --color-text-nav: #f0d8e4;
    --color-text-muted-purple: #d0a0b8;

    --color-primary: #BB2649;
    --color-primary-dark: #9a1e3c;
    --color-primary-deeper: #7a1830;
    --color-primary-muted: #d84868;
    --color-primary-surface: #3a1828;
    --color-accent: #e07090;
    --color-accent-purple: #e0a0b8;
    --color-accent-purple-muted: #d07098;
    --color-link: #e888a8;
    --color-link-hover: #e0a0b8;

    --color-border: #4a2030;
    --color-border-dark: #3a1828;
    --color-border-subtle: #3a1828;
    --color-border-divider: #321420;

    --color-gold: #e0c070;

    --overlay-purple: rgba(224, 160, 184, 0.12);
    --overlay-purple-hover: rgba(224, 160, 184, 0.18);
    --overlay-primary: rgba(187, 38, 73, 0.9);
    --overlay-primary-light: rgba(187, 38, 73, 0.35);
    --overlay-primary-faint: rgba(187, 38, 73, 0.25);
}

/* Light themes: ensure nav dropdowns stay readable */
html[data-theme="light"] #nav li ul,
html[data-theme="peach"] #nav li ul,
html[data-theme="cloud"] #nav li ul {
    box-shadow: 0 0 10px 0 var(--overlay-black-shadow);
}

@media (prefers-color-scheme: light) {
    html[data-theme="auto"] #nav li ul {
        box-shadow: 0 0 10px 0 var(--overlay-black-shadow);
    }
}

html[data-theme="light"] .user-my-account .list,
html[data-theme="peach"] .user-my-account .list,
html[data-theme="cloud"] .user-my-account .list {
    box-shadow: 0 4px 16px var(--overlay-black-shadow);
}

@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .user-my-account .list {
        box-shadow: 0 4px 16px var(--overlay-black-shadow);
    }
}

/* ── Light theme: contrast safety net ── */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="peach"] input::placeholder,
html[data-theme="peach"] textarea::placeholder,
html[data-theme="cloud"] input::placeholder,
html[data-theme="cloud"] textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

@media (prefers-color-scheme: light) {
    html[data-theme="auto"] input::placeholder,
    html[data-theme="auto"] textarea::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }
}