:root {
  --font-display: "Josefin Sans", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-logo: "Bauhaus 93", "Futura", sans-serif; /* Bauhaus Modern — uso exclusivo del logo per guía de marca */

  --on: #57ff06;
  --off: #e60014;
  --ac: #4649d6;
  --bk: #0a0a0a;
  --wh: #ffffff;

  --neutral-50: #f6f7fb;
  --neutral-100: #eceef5;
  --neutral-200: #d7dce7;
  --neutral-300: #d1d1d1;
  --neutral-400: #7c8698;
  --neutral-500: #6e6e6e;
  --neutral-600: #4a4a4a;
  --neutral-700: #1b2230;
  --neutral-800: #151921;
  --neutral-900: #0f1218;

  --accent-50: #edeefe;
  --accent-400: #7577e0;
  --accent-700: #2e31a8;

  /* Paletas de personaje — uso opcional en Pillars */
  --character-frida: #8b2fc9;
  --character-tesla: #c44fff;
  --character-davinci: #5bbf2a;
  --character-beethoven: #2b4ecc;
  --character-spark: #ffd700;

  --bg: var(--bk);
  --bg-elevated: rgba(255, 255, 255, 0.07);
  --bg-card: rgba(255, 255, 255, 0.08);
  --surface: rgba(13, 16, 24, 0.9);
  --surface-strong: rgba(8, 10, 15, 0.96);
  --text: rgba(255, 255, 255, 0.96);
  --text-soft: rgba(255, 255, 255, 0.74);
  --line: rgba(255, 255, 255, 0.12);
  --overlay: linear-gradient(180deg, rgba(7, 8, 12, 0.3), rgba(7, 8, 12, 0.78));
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.28);
  --shadow-focus: 0 0 0 3px rgba(87, 255, 6, 0.34);
  --focus-outline: 2px solid var(--on);
  --focus-outline-offset: 3px;

  --radius-xs: 0.5rem;
  --radius-sm: 0.875rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;

  /* Espaciado en rems semánticos. Equivalencias con la guía de marca (base 4px):   */
  /* --space-2xs = 0.375rem ≈ --sp1  (4px)  → micro gaps                          */
  /* --space-xs  = 0.75rem  ≈ --sp3  (12px) → elementos relacionados              */
  /* --space-sm  = 1rem     ≈ --sp4  (16px) → inputs, filas                       */
  /* --space-md  = 1.5rem   ≈ --sp6  (24px) → cards, gutter                      */
  /* --space-lg  = 2rem     ≈ --sp8  (32px) → gaps de sección                    */
  /* --space-xl  = 3rem     ≈ --sp12 (48px) → encabezado de sección              */
  /* --space-2xl = 4.5rem   ≈ --sp16 (64px)                                      */
  /* --space-3xl = 6rem     ≈ --sp24 (96px) → secciones hero                     */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  --max-width: 78rem;
  --header-height: 4.75rem;

  --fast: 150ms;
  --base: 220ms;
  --slow: 350ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark mode — html is the source of truth (set in wp_head before body exists) */
html[data-theme="dark"],
body[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-elevated: rgba(255, 255, 255, 0.07);
  --bg-card: rgba(255, 255, 255, 0.08);
  --surface: rgba(13, 16, 24, 0.9);
  --surface-strong: rgba(8, 10, 15, 0.96);
  --text: rgba(255, 255, 255, 0.96);
  --text-soft: rgba(255, 255, 255, 0.74);
  --line: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.28);
  background-color: #0a0a0a !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

html[data-theme="light"],
body[data-theme="light"] {
  --bg: #f5f6f2;
  --bg-elevated: rgba(255, 255, 255, 0.85);
  --bg-card: rgba(255, 255, 255, 0.92);
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --text: #10141c;
  --text-soft: rgba(16, 20, 28, 0.72);
  --line: rgba(16, 20, 28, 0.12);
  --overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(18, 24, 32, 0.52));
  --shadow-soft: 0 18px 40px rgba(53, 68, 92, 0.12);
  --shadow-card: 0 20px 50px rgba(53, 68, 92, 0.18);
  --shadow-focus: 0 0 0 3px rgba(87, 255, 6, 0.28);
  background-color: #f5f6f2 !important;
  color: #10141c !important;
}

@media (min-width: 48rem) {
  :root {
    --space-2xl: 5.5rem;
    --space-3xl: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 1ms;
    --base: 1ms;
    --slow: 1ms;
  }
}