/* Dos paletas completas, sobre los contratos semánticos existentes.
   El esquema base sigue gobernando los controles nativos y las excepciones
   de claro/oscuro. El acento de texto y el fondo de botón son independientes. */
html[data-appearance='peach'] {
    --bg-base: #fff7f0;
    --bg-surface: #f8e9df;
    --bg-elevated: #fffdfa;
    --bg-hover: #f3ddd0;
    --border: #e5cbbd;
    --border-strong: #c39883;
    --line: #e5cbbd;
    --text-primary: #3d302c;
    --text-secondary: #70594f;
    --text-muted: #806257;
    --muted: #806257;
    --accent: #97482f;
    --accent-strong: #793820;
    --accent-soft: #f4d6c5;
    --accent-btn: #94462f;
    --accent-btn-hover: #77351f;
    --nv-checkbox-checked: #793820;
    --signal: #7c5b46;
    --signal-soft: #f3dfc5;
    --success: #326148;
    --success-soft: #e1ebdd;
    --warning: #90511d;
    --warning-soft: #f7e6c7;
    --danger: #a23c3a;
    --danger-soft: #fae0d9;
    --status-info: #97482f;
    --status-success: #326148;
    --status-error: #a23c3a;
    --status-warning: #90511d;
    --shadow-sm: 0 1px 3px #66381f0a;
    --shadow-md: 0 4px 16px #66381f0c;
    --shadow-lg: 0 16px 42px #66381f18;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
}
html[data-appearance='slate'] {
    --bg-base: #16212e;
    --bg-surface: #1e2b3b;
    --bg-elevated: #29394c;
    --bg-hover: #33465b;
    --border: #415369;
    --border-strong: #6a8097;
    --line: #415369;
    --text-primary: #f2f1ed;
    --text-secondary: #c0ccd8;
    --text-muted: #aebdcd;
    --muted: #aebdcd;
    --accent: #e8bc95;
    --accent-strong: #f5cba7;
    --accent-soft: #433d3a;
    --accent-btn: #915033;
    --accent-btn-hover: #7d432b;
    --nv-checkbox-checked: #915033;
    --signal: #e8bc95;
    --signal-soft: #433d3a;
    --success: #a5d8bc;
    --success-soft: #283e3b;
    --warning: #f0cb8c;
    --warning-soft: #443d32;
    --danger: #ffb4a7;
    --danger-soft: #483639;
    --status-info: #e8bc95;
    --status-success: #a5d8bc;
    --status-error: #ffb4a7;
    --status-warning: #f0cb8c;
    --shadow-sm: 0 1px 3px #09111d24;
    --shadow-md: 0 6px 16px #09111d33;
    --shadow-lg: 0 18px 44px #09111d55;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 12px;
}
html:is([data-appearance='peach'], [data-appearance='slate']) {
    --bg-surface-blur: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    --nv-bg-page: var(--bg-base);
    --nv-bg-surface: var(--bg-surface);
    --nv-bg-elevated: var(--bg-elevated);
    --nv-bg-subtle: var(--bg-hover);
    --nv-bg-hover: var(--bg-hover);
    --nv-bg-input: var(--bg-elevated);
    --nv-fg-strong: var(--text-primary);
    --nv-fg-default: var(--text-primary);
    --nv-fg-muted: var(--text-secondary);
    --nv-fg-subtle: var(--text-muted);
    --nv-fg-inverse: var(--bg-base);
    --nv-border-default: var(--border);
    --nv-border-strong: var(--border-strong);
    --nv-border-focus: var(--accent);
    --nv-accent-primary: var(--accent);
    --nv-accent-primary-hover: var(--accent-strong);
    --nv-accent-primary-fg: var(--bg-base);
    --nv-accent-cta: var(--accent-btn);
    --nv-accent-cta-hover: var(--accent-btn-hover);
    --nv-accent-cta-fg: #fff;
    --nv-accent-warm: var(--signal);
    --nv-accent-warm-hover: var(--signal);
    --nv-teal-50: var(--accent-soft);
    --nv-teal-100: var(--accent-soft);
    --nv-teal-300: var(--accent);
    --nv-teal-500: var(--accent);
    --nv-warm-50: var(--signal-soft);
    --nv-warm-300: var(--signal);
    --nv-warm-500: var(--accent-btn);
    --nv-warm-600: var(--accent-btn-hover);
    --nv-success: var(--success);
    --nv-success-bg: var(--success-soft);
    --nv-warning: var(--warning);
    --nv-warning-bg: var(--warning-soft);
    --nv-danger: var(--danger);
    --nv-danger-bg: var(--danger-soft);
    --nv-info: var(--accent);
    --nv-info-bg: var(--accent-soft);
    --nv-shadow-xs: var(--shadow-sm);
    --nv-shadow-sm: var(--shadow-sm);
    --nv-shadow-md: var(--shadow-md);
    --nv-shadow-lg: var(--shadow-lg);
    --nv-shadow-xl: var(--shadow-lg);
    --nv-radius-sm: var(--radius-sm);
    --nv-radius-md: var(--radius-md);
    --nv-radius-lg: var(--radius-lg);
    --nv-radius-xl: var(--radius-xl);
    --nv-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
    --font-sans: 'Bricolage Grotesque', system-ui, sans-serif;
    --nv-font-body: var(--font-sans);
}
html[data-appearance='peach'] {
    --nv-accent-primary-fg: #fff;
}
/* Administración tiene tokens locales; recibe los valores ya resueltos en html. */
html:is([data-appearance='peach'], [data-appearance='slate']) body.page-admin {
    --bg-base: var(--nv-bg-page);
    --bg-surface: var(--nv-bg-surface);
    --bg-elevated: var(--nv-bg-elevated);
    --bg-hover: var(--nv-bg-hover);
    --text-primary: var(--nv-fg-strong);
    --text-secondary: var(--nv-fg-muted);
    --text-muted: var(--nv-fg-subtle);
    --border: var(--nv-border-default);
    --border-strong: var(--nv-border-strong);
}
html:is([data-appearance='peach'], [data-appearance='slate']) :is(.nivor-main-content, .marketing-shell) {
    background: var(--bg-base) !important;
    color: var(--text-primary);
}
html:is([data-appearance='peach'], [data-appearance='slate']) :is(.nivor-sidebar, .nivor-mobile-header, .inbox-rail) {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
}
html:is([data-appearance='peach'], [data-appearance='slate']) :is(.glow-cyan, .glow-purple) {
    background: transparent !important;
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    :is(.nivor-sidebar, .nivor-mobile-header, .nivor-mobile-nav)
    :is(a, button):hover {
    background: var(--bg-hover) !important;
}
html:is([data-appearance='peach'], [data-appearance='slate']) .sidebar-nav-link.sidebar-nav-active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
}
html[data-appearance='slate'] :is(.sidebar-nav-link, .nivor-mobile-nav-link, .nv-card, .cx-card, .nv-shell-action) {
    border-radius: 8px;
}
html[data-appearance='peach'] :is(.nv-card, .cx-card) {
    border-radius: 20px;
}
html:is([data-appearance='peach'], [data-appearance='slate']) :is(.nv-card, .cx-card) {
    box-shadow: var(--shadow-sm);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .cx-btn:not(.ghost) {
    background: var(--accent-btn);
    color: #fff;
}
html:is([data-appearance='peach'], [data-appearance='slate']) .cx-on {
    color: var(--success);
    background: var(--success-soft);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .cx-off {
    color: var(--warning);
    background: var(--warning-soft);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .cx-msg.ok {
    color: var(--success);
    background: var(--success-soft);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .cx-msg.err {
    color: var(--danger);
    background: var(--danger-soft);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .msg-user {
    background: var(--bg-hover);
    color: var(--text-primary);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .msg-assistant {
    background: var(--accent-soft);
    color: var(--text-primary);
    border-color: var(--border);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .msg-human {
    background: var(--signal-soft);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .msg-author {
    color: var(--text-secondary);
}
html:is([data-appearance='peach'], [data-appearance='slate']) ::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}
/* Las vistas públicas antiguas también usan aliases y colores literales.
   Se resuelven aquí para que alta, acceso y precios conserven la apariencia. */
html:is([data-appearance='peach'], [data-appearance='slate']) .marketing-shell {
    --nv-teal-200: var(--text-secondary);
    --nv-teal-700: var(--accent);
    --nv-teal-900: var(--bg-surface);
    --nv-cream-50: var(--text-primary);
    --nv-cream-100: var(--text-primary);
    --nv-cream-300: var(--text-secondary);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.section-dark, .bg-sand, .section-gradient-subtle, .section-gradient-accent) {
    background: var(--bg-surface) !important;
    color: var(--text-primary);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.text-ink, .section-title, .metric-value) {
    color: var(--text-primary);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.text-secondary, .section-copy, .nav-link, .stitch-chip-label) {
    color: var(--text-secondary);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .marketing-shell :is(.text-muted, .metric-label) {
    color: var(--text-muted);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .marketing-shell :is(.text-accent, .nav-link-active) {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.glass-panel, .bg-paper, .stitch-feature-card, .stitch-metric-card) {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.chip, .chip-dark, .stitch-chip, .worker-badge-base, .worker-badge-premium) {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--border);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .marketing-shell :is(.form-input, .form-textarea) {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.form-input, .form-textarea)::placeholder {
    color: var(--text-muted);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .marketing-shell :is(.form-input, .form-textarea):focus {
    border-color: var(--accent);
    box-shadow: var(--nv-focus-ring);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.button-secondary, .button-secondary-dark, .stitch-btn-ghost) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.stitch-btn-primary, .stitch-btn-shimmer) {
    background: var(--accent-btn);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
html:is([data-appearance='peach'], [data-appearance='slate'])
    .marketing-shell
    :is(.gradient-text-cyan, .gradient-text-mixed) {
    background: none;
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
}
.demo-msg__checks .nv-ico {
    font-size: 13px;
}
html:is([data-appearance='peach'], [data-appearance='slate']) .nivor-marketing-header {
    background: var(--bg-surface-blur);
    --nivor-header-border: var(--border);
}
html:is([data-appearance='peach'], [data-appearance='slate']) .marketing-theme-toggle {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-primary);
}
html:is([data-appearance='peach'], [data-appearance='slate']) #scroll-top-btn {
    background: var(--accent-btn) !important;
    color: #fff !important;
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
    animation: none;
}