/* Paletas compartidas por la web y el escritorio sobre las variables de app.css. */
html[data-theme="dark"],
html[data-theme="night-kiwi"] {
    color-scheme: dark;
    --ui-brand-light-display: none;
    --ui-brand-dark-display: block;
    --ui-page: #10141d;
    --ui-surface: #191f2c;
    --ui-surface-subtle: #1e2635;
    --ui-surface-muted: #252f40;
    --ui-border: #303b4e;
    --ui-border-strong: #47566e;
    --ui-text: #edf1f8;
    --ui-text-secondary: #c2ccdb;
    --ui-text-muted: #9caec6;
    --ui-text-disabled: #7e8da3;
    --ui-accent: #afa4ff;
    --ui-accent-hover: #c3baff;
    --ui-primary-action: #373052;
    --ui-primary-action-foreground: #d1c9ff;
    --ui-on-accent: #131827;
    --ui-danger: #ffaaa4;
    --ui-danger-soft: #39252b;
    --ui-danger-border: #75434c;
    --ui-success: #78d6b4;
    --ui-success-strong: #67d7bb;
    --ui-success-soft: #1c342f;
    --ui-success-border: #396658;
    --ui-positive-action: #213e34;
    --ui-positive-action-foreground: #91dfb4;
    --ui-destructive-action: #42292f;
    --ui-destructive-action-foreground: #ffaaa4;
    --ui-edit-action: #f2aa7c;
    --ui-edit-action-foreground: #261b16;
    --ui-reset-action: #435167;
    --ui-reset-action-foreground: #edf1f8;
    --ui-info: #85ccf7;
    --ui-info-soft: #1d3042;
    --ui-info-border: #3c617e;
    --ui-warning: #f3cb82;
    --ui-warning-soft: #392f22;
    --ui-warning-border: #756040;
    --ui-shadow-rgb: 0 0 0;
    --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 22%);
    --ui-shadow: 0 10px 28px rgb(0 0 0 / 22%);
    --ui-shadow-lg: 0 22px 48px rgb(0 0 0 / 42%), 0 6px 16px rgb(0 0 0 / 24%);
    --ui-floating-surface: #202837;
    --ui-highlight: rgb(255 255 255 / 6%);
    --ui-overlay: rgb(0 0 0 / 62%);
    --ui-tooltip-surface: #e3e9f2;
    --ui-tooltip-text: #172033;
    --ui-tooltip-border: #b9c6d9;
    --ui-nav-accent-base: #c2ccdb;
    --ui-badge-neutral: #c2ccdb;
    --ui-badge-neutral-soft: #303a49;
    --ui-badge-accent: #d4b5ff;
    --ui-badge-accent-soft: #3c2c54;
    --ui-badge-info: #8ddce8;
    --ui-badge-info-soft: #1f414b;
    --ui-badge-success: #91dfa4;
    --ui-badge-success-soft: #254530;
    --ui-badge-warning: #f3cf83;
    --ui-badge-warning-soft: #473b25;
    --ui-badge-danger: #ffadb5;
    --ui-badge-danger-soft: #492e37;
    --ui-distributor-badge: #233e5a;
    --ui-distributor-badge-text: #a9d4ff;
    --ui-demo-badge: #492c40;
    --ui-demo-badge-text: #f5b6d6;
    --ui-hospitality-badge: #47372c;
    --ui-hospitality-badge-text: #ebbd96;
    --ui-beauty-badge: #3c3634;
    --ui-beauty-badge-text: #d6c7bf;
    --ui-retail-badge: #383f2d;
    --ui-retail-badge-text: #c8d6a5;
    --ui-contact-edit: #f2aa7c;
    --ui-contact-edit-soft: #392c26;
    --ui-contact-edit-subtle: #2a2526;
    --ui-contact-edit-border: #76513a;
    --ui-email-ink: #c3baff;
    --ui-email-hover: #e0daff;
    --ui-email-soft: #353049;
    --ui-validation-success: #91dfa4;
    --ui-validation-danger: #ffaaa4;
    --ui-checkbox-border: #7e8da3;
    --ui-success-gradient-end: #5ebc9d;
    --ui-login-page: var(--ui-page);
    --ui-login-paper: var(--ui-surface);
    --ui-login-text: var(--ui-text);
    --ui-login-muted: var(--ui-text-secondary);
    --ui-login-input: var(--ui-surface-subtle);
    --ui-login-input-hover: var(--ui-surface-muted);
    --ui-login-border: var(--ui-border-strong);
    --ui-login-placeholder: var(--ui-text-muted);
    --ui-login-gold: #c7ad7a;
    --ui-login-gold-hover: #dac393;
    --ui-login-separator: #756040;
}

/* Night Kiwi keeps the dark status colors and uses charcoal with lime accents. */
html[data-theme="night-kiwi"] {
    --ui-page: #222222;
    --ui-surface: #2a2a2a;
    --ui-surface-subtle: #303030;
    --ui-surface-muted: #383838;
    --ui-border: #444444;
    --ui-border-strong: #5b5b5b;
    --ui-text: #f5f5f2;
    --ui-text-secondary: #d2d4cc;
    --ui-text-muted: #b1b5a8;
    --ui-text-disabled: #85897d;
    --ui-accent: #89e900;
    --ui-accent-hover: #a5f23b;
    --ui-primary-action: var(--ui-accent-surface-strong);
    --ui-primary-action-foreground: var(--ui-accent);
    --ui-on-accent: var(--ui-page);
    --ui-reset-action: #484848;
    --ui-reset-action-foreground: var(--ui-text);
    --ui-floating-surface: #303030;
    --ui-tooltip-surface: #e6e9df;
    --ui-tooltip-text: var(--ui-page);
    --ui-tooltip-border: #c6ccbc;
    --ui-nav-accent-base: var(--ui-text-secondary);
    --ui-badge-neutral: var(--ui-text-secondary);
    --ui-badge-neutral-soft: var(--ui-surface-muted);
    --ui-badge-accent: var(--ui-accent);
    --ui-badge-accent-soft: var(--ui-accent-surface-strong);
    --ui-distributor-badge: #273e4c;
    --ui-distributor-badge-text: #9fd2f0;
    --ui-demo-badge: #45313b;
    --ui-demo-badge-text: #edb7cd;
    --ui-hospitality-badge: #49392e;
    --ui-hospitality-badge-text: #e8bc98;
    --ui-beauty-badge: #403a36;
    --ui-beauty-badge-text: #d9cdc1;
    --ui-retail-badge: #3d4031;
    --ui-retail-badge-text: #d1d2ae;
    --ui-email-ink: var(--ui-accent);
    --ui-email-hover: var(--ui-accent-hover);
    --ui-email-soft: var(--ui-accent-surface-strong);
    --ui-checkbox-border: #85897d;
    --ui-calendar-owner: #466820;
    --ui-login-gold: var(--ui-accent);
    --ui-login-gold-hover: var(--ui-accent-hover);
    --ui-login-separator: var(--ui-border-strong);
    --ui-brand-mark-filter: brightness(0);
}

/* Cyprus Sand uses warm light surfaces with deep green text and accents. */
html[data-theme="cyprus-sand"] {
    color-scheme: light;
    --ui-page: #f0ede5;
    --ui-surface: #faf8f3;
    --ui-surface-subtle: #f5f2eb;
    --ui-surface-muted: #e8e5dc;
    --ui-border: #d5d6c9;
    --ui-border-strong: #afb9ab;
    --ui-text: #004643;
    --ui-text-secondary: #456157;
    --ui-text-muted: #5b6b61;
    --ui-text-disabled: #929b90;
    --ui-accent: #004643;
    --ui-accent-hover: #00605a;
    --ui-primary-action: #dce5dd;
    --ui-primary-action-foreground: var(--ui-accent);
    --ui-floating-surface: #fffdf8;
    --ui-shadow-rgb: 0 46 43;
    --ui-shadow-sm: 0 1px 3px rgb(0 46 43 / 7%);
    --ui-shadow: 0 10px 28px rgb(0 46 43 / 8%);
    --ui-shadow-lg: 0 22px 48px rgb(0 46 43 / 16%), 0 6px 16px rgb(0 46 43 / 9%);
    --ui-overlay: rgb(0 46 43 / 46%);
    --ui-tooltip-surface: var(--ui-accent);
    --ui-tooltip-border: var(--ui-text-secondary);
    --ui-nav-accent-base: var(--ui-accent);
    --ui-badge-neutral: var(--ui-text-secondary);
    --ui-badge-neutral-soft: var(--ui-surface-muted);
    --ui-badge-accent: var(--ui-accent);
    --ui-badge-accent-soft: var(--ui-primary-action);
    --ui-distributor-badge: #dce6ee;
    --ui-distributor-badge-text: #345979;
    --ui-demo-badge: #efdee4;
    --ui-demo-badge-text: #85435f;
    --ui-hospitality-badge: #efdfcf;
    --ui-hospitality-badge-text: #7d4d30;
    --ui-beauty-badge: #e8e0d6;
    --ui-beauty-badge-text: #655448;
    --ui-retail-badge: #e5e7ce;
    --ui-retail-badge-text: #59612f;
    --ui-email-ink: var(--ui-accent);
    --ui-email-hover: #002e2b;
    --ui-email-soft: var(--ui-primary-action);
    --ui-calendar-owner: var(--ui-accent);
    --ui-login-page: var(--ui-page);
    --ui-login-paper: var(--ui-surface);
    --ui-login-text: var(--ui-text);
    --ui-login-muted: var(--ui-text-secondary);
    --ui-login-input: var(--ui-surface-subtle);
    --ui-login-input-hover: var(--ui-surface-muted);
    --ui-login-border: var(--ui-border-strong);
    --ui-login-placeholder: var(--ui-text-muted);
    --ui-login-gold: var(--ui-accent);
    --ui-login-gold-hover: var(--ui-email-hover);
    --ui-login-separator: var(--ui-border-strong);
}

/* Bootstrap controls and utilities use the same palette as the custom controls. */
html[data-theme] {
    --bs-body-color: var(--ui-text);
    --bs-body-bg: var(--ui-page);
    --bs-heading-color: var(--ui-text);
    --bs-secondary-color: var(--ui-text-muted);
    --bs-tertiary-color: var(--ui-text-disabled);
    --bs-secondary-bg: var(--ui-surface-muted);
    --bs-tertiary-bg: var(--ui-surface-subtle);
    --bs-border-color: var(--ui-border);
    --bs-emphasis-color: var(--ui-text);
    --bs-link-color: var(--ui-accent);
    --bs-link-hover-color: var(--ui-accent-hover);
    accent-color: var(--ui-accent);
    scrollbar-color: var(--ui-border-strong) var(--ui-page);
}

/* Fixed preview palettes show each theme regardless of the current selection. */
:root {
    --ui-preview-light-page: #f5f7fb;
    --ui-preview-light-surface: #ffffff;
    --ui-preview-light-border: #d7ddeb;
    --ui-preview-light-accent: #8f7dff;
    --ui-preview-dark-page: #10141d;
    --ui-preview-dark-surface: #191f2c;
    --ui-preview-dark-border: #3d4960;
    --ui-preview-dark-accent: #afa4ff;
    --ui-preview-kiwi-page: #222222;
    --ui-preview-kiwi-surface: #2a2a2a;
    --ui-preview-kiwi-border: #444444;
    --ui-preview-kiwi-accent: #89e900;
    --ui-preview-cyprus-page: #f0ede5;
    --ui-preview-cyprus-surface: #faf8f3;
    --ui-preview-cyprus-border: #d5d6c9;
    --ui-preview-cyprus-accent: #004643;
}

@media (prefers-reduced-motion: no-preference) {
    html[data-theme] body {
        transition: background-color 150ms ease, color 150ms ease;
    }
}