/* Seuweb v5B — Design tokens (8 color schemes) */

:root {
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --space-section: clamp(5rem, 14vh, 10rem);
  --space-block: clamp(1.5rem, 4vw, 3rem);
  --max-width: 80rem;
  --nav-height: 4.375rem;
  --topbar-height: 0rem;
  --header-total: calc(var(--nav-height) + var(--topbar-height));

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-soft: 0 24px 80px -20px var(--color-shadow);
  --shadow-glow: 0 0 60px -10px var(--color-glow-strong);

  --z-palette: 75;
  --z-topbar: 70;
  --z-nav: 60;
  --z-progress: 65;
  --z-fab: 50;

  --color-transition: 0.4s var(--ease-out-expo);
}

/* Default: Alpina · Noche */
html {
  color-scheme: dark;
  --color-bg: #060608;
  --color-surface: #0e0d0b;
  --color-surface-elevated: #161412;
  --color-text: #ede8e0;
  --color-text-muted: #9a9488;
  --color-text-faint: #5c574f;
  --color-accent: #d4c4a0;
  --color-accent-light: #e8dcc4;
  --color-accent-hover: #e8dcc4;
  --color-accent-contrast: #060608;
  --color-signal: #4a6b5c;
  --color-signal-glow: rgba(74, 107, 92, 0.15);
  --color-border: rgba(237, 232, 224, 0.08);
  --color-border-strong: rgba(237, 232, 224, 0.15);
  --color-border-accent: rgba(212, 196, 160, 0.35);
  --color-glow: rgba(212, 196, 160, 0.12);
  --color-glow-strong: rgba(212, 196, 160, 0.28);
  --color-shadow: rgba(0, 0, 0, 0.55);
  --color-nav-bg: rgba(6, 6, 8, 0.88);
  --color-overlay: rgba(6, 6, 8, 0.92);
  --color-frame: #161412;
  --color-frame-border: rgba(237, 232, 224, 0.1);
  --color-hover-surface: rgba(212, 196, 160, 0.04);
  --color-strike: rgba(154, 148, 136, 0.4);
  --gradient-hero-1: rgba(212, 196, 160, 0.08);
  --gradient-hero-2: rgba(74, 107, 92, 0.06);
  --gradient-hero-3: rgba(14, 13, 11, 0.9);
  --gradient-hero-vignette: rgba(6, 6, 8, 0.5);
  --gradient-audit: rgba(212, 196, 160, 0.09);
  --gradient-progress: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));

  --robot-body: var(--color-surface-elevated);
  --robot-shell: var(--color-bg);
  --robot-stroke: var(--color-border-strong);
  --robot-ring: var(--color-accent);
  --robot-eye: var(--color-accent-light);
  --robot-eye-deep: var(--color-accent);
  --robot-thruster: var(--color-signal);
}

html[data-mode="dia"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --color-transition: 0s;
  }
}

/* ── ALPINA · DÍA ── */
html[data-palette="alpina"][data-mode="dia"] {
  --color-bg: #f4f0e8;
  --color-surface: #ffffff;
  --color-surface-elevated: #ede8e0;
  --color-text: #1a1714;
  --color-text-muted: #6b6358;
  --color-text-faint: #9a9288;
  --color-accent: #8b7345;
  --color-accent-light: #b5a078;
  --color-accent-hover: #6f5c36;
  --color-accent-contrast: #ffffff;
  --color-signal: #3d5a4a;
  --color-signal-glow: rgba(61, 90, 74, 0.12);
  --color-border: rgba(26, 23, 20, 0.08);
  --color-border-strong: rgba(26, 23, 20, 0.15);
  --color-border-accent: rgba(139, 115, 69, 0.35);
  --color-glow: rgba(139, 115, 69, 0.15);
  --color-glow-strong: rgba(139, 115, 69, 0.25);
  --color-shadow: rgba(26, 23, 20, 0.12);
  --color-nav-bg: rgba(244, 240, 232, 0.92);
  --color-overlay: rgba(244, 240, 232, 0.95);
  --color-frame: #f0ebe3;
  --color-frame-border: rgba(26, 23, 20, 0.1);
  --color-hover-surface: rgba(139, 115, 69, 0.06);
  --color-strike: rgba(107, 99, 88, 0.5);
  --gradient-hero-1: rgba(181, 160, 120, 0.15);
  --gradient-hero-2: rgba(74, 107, 92, 0.08);
  --gradient-hero-3: rgba(237, 232, 224, 0.9);
  --gradient-hero-vignette: rgba(244, 240, 232, 0.4);
  --gradient-audit: rgba(181, 160, 120, 0.12);
}

/* ── ALPINA · NOCHE ── */
html[data-palette="alpina"][data-mode="noche"] {
  --color-bg: #060608;
  --color-surface: #0e0d0b;
  --color-surface-elevated: #161412;
  --color-text: #ede8e0;
  --color-text-muted: #9a9488;
  --color-text-faint: #5c574f;
  --color-accent: #d4c4a0;
  --color-accent-light: #e8dcc4;
  --color-accent-hover: #e8dcc4;
  --color-accent-contrast: #060608;
  --color-signal: #4a6b5c;
  --color-signal-glow: rgba(74, 107, 92, 0.15);
  --color-border: rgba(237, 232, 224, 0.08);
  --color-border-strong: rgba(237, 232, 224, 0.15);
  --color-border-accent: rgba(212, 196, 160, 0.35);
  --color-glow: rgba(212, 196, 160, 0.12);
  --color-glow-strong: rgba(212, 196, 160, 0.28);
  --color-shadow: rgba(0, 0, 0, 0.55);
  --color-nav-bg: rgba(6, 6, 8, 0.88);
  --color-overlay: rgba(6, 6, 8, 0.92);
  --color-frame: #161412;
  --color-frame-border: rgba(237, 232, 224, 0.1);
  --color-hover-surface: rgba(212, 196, 160, 0.04);
  --color-strike: rgba(154, 148, 136, 0.4);
  --gradient-hero-1: rgba(212, 196, 160, 0.08);
  --gradient-hero-2: rgba(74, 107, 92, 0.06);
  --gradient-hero-3: rgba(14, 13, 11, 0.9);
  --gradient-hero-vignette: rgba(6, 6, 8, 0.5);
  --gradient-audit: rgba(212, 196, 160, 0.09);
}

/* ── EDITORIAL · DÍA ── */
html[data-palette="editorial"][data-mode="dia"] {
  --color-bg: #f7f3ed;
  --color-surface: #fffcf8;
  --color-surface-elevated: #f0eae0;
  --color-text: #1c1610;
  --color-text-muted: #6e6256;
  --color-text-faint: #9a8e82;
  --color-accent: #9a5c28;
  --color-accent-light: #c47840;
  --color-accent-hover: #7a4820;
  --color-accent-contrast: #fffcf8;
  --color-signal: #5c6b52;
  --color-signal-glow: rgba(92, 107, 82, 0.12);
  --color-border: rgba(28, 22, 16, 0.1);
  --color-border-strong: rgba(28, 22, 16, 0.18);
  --color-border-accent: rgba(154, 92, 40, 0.35);
  --color-glow: rgba(154, 92, 40, 0.12);
  --color-glow-strong: rgba(154, 92, 40, 0.22);
  --color-shadow: rgba(28, 22, 16, 0.1);
  --color-nav-bg: rgba(247, 243, 237, 0.94);
  --color-overlay: rgba(247, 243, 237, 0.96);
  --color-frame: #f0eae0;
  --color-frame-border: rgba(28, 22, 16, 0.1);
  --color-hover-surface: rgba(154, 92, 40, 0.05);
  --color-strike: rgba(110, 98, 86, 0.45);
  --gradient-hero-1: rgba(196, 120, 64, 0.12);
  --gradient-hero-2: rgba(92, 107, 82, 0.06);
  --gradient-hero-3: rgba(240, 234, 226, 0.95);
  --gradient-hero-vignette: rgba(247, 243, 237, 0.35);
  --gradient-audit: rgba(196, 120, 64, 0.1);
}

/* ── EDITORIAL · NOCHE ── */
html[data-palette="editorial"][data-mode="noche"] {
  --color-bg: #14100c;
  --color-surface: #1e1814;
  --color-surface-elevated: #282018;
  --color-text: #f0eae2;
  --color-text-muted: #a89888;
  --color-text-faint: #6e6258;
  --color-accent: #c47840;
  --color-accent-light: #d89058;
  --color-accent-hover: #d89058;
  --color-accent-contrast: #14100c;
  --color-signal: #7a8e6e;
  --color-signal-glow: rgba(122, 142, 110, 0.15);
  --color-border: rgba(240, 234, 226, 0.08);
  --color-border-strong: rgba(240, 234, 226, 0.14);
  --color-border-accent: rgba(196, 120, 64, 0.35);
  --color-glow: rgba(196, 120, 64, 0.12);
  --color-glow-strong: rgba(196, 120, 64, 0.25);
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-nav-bg: rgba(20, 16, 12, 0.9);
  --color-overlay: rgba(20, 16, 12, 0.94);
  --color-frame: #282018;
  --color-frame-border: rgba(240, 234, 226, 0.08);
  --color-hover-surface: rgba(196, 120, 64, 0.05);
  --color-strike: rgba(168, 152, 136, 0.4);
  --gradient-hero-1: rgba(196, 120, 64, 0.1);
  --gradient-hero-2: rgba(122, 142, 110, 0.06);
  --gradient-hero-3: rgba(30, 24, 20, 0.9);
  --gradient-hero-vignette: rgba(20, 16, 12, 0.55);
  --gradient-audit: rgba(196, 120, 64, 0.08);
}

/* ── ELÉCTRICO · DÍA ── */
html[data-palette="electrico"][data-mode="dia"] {
  --color-bg: #e8edf2;
  --color-surface: #f5f8fa;
  --color-surface-elevated: #dce4ec;
  --color-text: #0f1419;
  --color-text-muted: #5a6672;
  --color-text-faint: #8a96a4;
  --color-accent: #007a99;
  --color-accent-light: #0099bf;
  --color-accent-hover: #005f78;
  --color-accent-contrast: #ffffff;
  --color-signal: #4a6b7a;
  --color-signal-glow: rgba(74, 107, 122, 0.12);
  --color-border: rgba(15, 20, 25, 0.08);
  --color-border-strong: rgba(15, 20, 25, 0.16);
  --color-border-accent: rgba(0, 122, 153, 0.35);
  --color-glow: rgba(0, 122, 153, 0.15);
  --color-glow-strong: rgba(0, 122, 153, 0.25);
  --color-shadow: rgba(15, 20, 25, 0.1);
  --color-nav-bg: rgba(232, 237, 242, 0.94);
  --color-overlay: rgba(232, 237, 242, 0.96);
  --color-frame: #dce4ec;
  --color-frame-border: rgba(15, 20, 25, 0.1);
  --color-hover-surface: rgba(0, 122, 153, 0.05);
  --color-strike: rgba(90, 102, 114, 0.45);
  --gradient-hero-1: rgba(0, 153, 191, 0.12);
  --gradient-hero-2: rgba(74, 107, 122, 0.08);
  --gradient-hero-3: rgba(220, 228, 236, 0.95);
  --gradient-hero-vignette: rgba(232, 237, 242, 0.4);
  --gradient-audit: rgba(0, 153, 191, 0.1);
}

/* ── ELÉCTRICO · NOCHE ── */
html[data-palette="electrico"][data-mode="noche"] {
  --color-bg: #0a0e14;
  --color-surface: #121820;
  --color-surface-elevated: #1a2230;
  --color-text: #e4ebf2;
  --color-text-muted: #8a96a4;
  --color-text-faint: #5a6672;
  --color-accent: #00e5ff;
  --color-accent-light: #33edff;
  --color-accent-hover: #33edff;
  --color-accent-contrast: #0a0e14;
  --color-signal: #5a8a9a;
  --color-signal-glow: rgba(90, 138, 154, 0.15);
  --color-border: rgba(228, 235, 242, 0.08);
  --color-border-strong: rgba(228, 235, 242, 0.14);
  --color-border-accent: rgba(0, 229, 255, 0.35);
  --color-glow: rgba(0, 229, 255, 0.12);
  --color-glow-strong: rgba(0, 229, 255, 0.28);
  --color-shadow: rgba(0, 0, 0, 0.55);
  --color-nav-bg: rgba(10, 14, 20, 0.9);
  --color-overlay: rgba(10, 14, 20, 0.94);
  --color-frame: #1a2230;
  --color-frame-border: rgba(228, 235, 242, 0.08);
  --color-hover-surface: rgba(0, 229, 255, 0.04);
  --color-strike: rgba(138, 150, 164, 0.4);
  --gradient-hero-1: rgba(0, 229, 255, 0.08);
  --gradient-hero-2: rgba(90, 138, 154, 0.06);
  --gradient-hero-3: rgba(18, 24, 32, 0.9);
  --gradient-hero-vignette: rgba(10, 14, 20, 0.55);
  --gradient-audit: rgba(0, 229, 255, 0.07);
}

/* ── MONOCROMA · DÍA ── */
html[data-palette="monocroma"][data-mode="dia"] {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-elevated: #f0f0f0;
  --color-text: #0a0a0a;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #999999;
  --color-accent: #d62828;
  --color-accent-light: #e84545;
  --color-accent-hover: #b81f1f;
  --color-accent-contrast: #ffffff;
  --color-signal: #4a4a4a;
  --color-signal-glow: rgba(74, 74, 74, 0.1);
  --color-border: rgba(10, 10, 10, 0.1);
  --color-border-strong: rgba(10, 10, 10, 0.18);
  --color-border-accent: rgba(214, 40, 40, 0.35);
  --color-glow: rgba(214, 40, 40, 0.12);
  --color-glow-strong: rgba(214, 40, 40, 0.22);
  --color-shadow: rgba(10, 10, 10, 0.1);
  --color-nav-bg: rgba(250, 250, 250, 0.94);
  --color-overlay: rgba(250, 250, 250, 0.96);
  --color-frame: #f0f0f0;
  --color-frame-border: rgba(10, 10, 10, 0.1);
  --color-hover-surface: rgba(214, 40, 40, 0.04);
  --color-strike: rgba(107, 107, 107, 0.45);
  --gradient-hero-1: rgba(10, 10, 10, 0.04);
  --gradient-hero-2: rgba(10, 10, 10, 0.02);
  --gradient-hero-3: rgba(240, 240, 240, 0.95);
  --gradient-hero-vignette: rgba(250, 250, 250, 0.35);
  --gradient-audit: rgba(214, 40, 40, 0.06);
}

/* ── MONOCROMA · NOCHE ── */
html[data-palette="monocroma"][data-mode="noche"] {
  --color-bg: #050505;
  --color-surface: #111111;
  --color-surface-elevated: #1a1a1a;
  --color-text: #f5f5f5;
  --color-text-muted: #999999;
  --color-text-faint: #666666;
  --color-accent: #ff3b3b;
  --color-accent-light: #ff5555;
  --color-accent-hover: #ff5555;
  --color-accent-contrast: #050505;
  --color-signal: #cccccc;
  --color-signal-glow: rgba(204, 204, 204, 0.1);
  --color-border: rgba(245, 245, 245, 0.1);
  --color-border-strong: rgba(245, 245, 245, 0.16);
  --color-border-accent: rgba(255, 59, 59, 0.35);
  --color-glow: rgba(255, 59, 59, 0.12);
  --color-glow-strong: rgba(255, 59, 59, 0.25);
  --color-shadow: rgba(0, 0, 0, 0.6);
  --color-nav-bg: rgba(5, 5, 5, 0.92);
  --color-overlay: rgba(5, 5, 5, 0.95);
  --color-frame: #1a1a1a;
  --color-frame-border: rgba(245, 245, 245, 0.08);
  --color-hover-surface: rgba(255, 59, 59, 0.04);
  --color-strike: rgba(153, 153, 153, 0.4);
  --gradient-hero-1: rgba(255, 255, 255, 0.03);
  --gradient-hero-2: rgba(255, 255, 255, 0.02);
  --gradient-hero-3: rgba(17, 17, 17, 0.95);
  --gradient-hero-vignette: rgba(5, 5, 5, 0.6);
  --gradient-audit: rgba(255, 59, 59, 0.06);
}

/* Smooth palette transitions */
html.palette-ready {
  transition:
    background-color var(--color-transition),
    color var(--color-transition);
}

html.palette-ready *,
html.palette-ready *::before,
html.palette-ready *::after {
  transition:
    background-color var(--color-transition),
    border-color var(--color-transition),
    color var(--color-transition),
    box-shadow var(--color-transition);
}