:root{
  /* Color — DESIGN_SYSTEM.md §1 */
  --color-bg:#FFFFFF;
  --color-bg-soft:#EEECEA;
  --color-ink:#0F1121;
  --color-ink-secondary:#151E35;
  --color-ink-muted:#5C6070;
  --color-accent:#EC7416;
  --color-accent-hover:#D4650C;
  --color-border:#E4E1DD;
  --color-on-dark:#EEECEA;

  /* Tipografía — §2 */
  --font-body:'Montserrat', sans-serif;
  --font-script:'Ephesis', cursive;

  --text-display: 72px;
  --text-h1: 48px;
  --text-h2: 32px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-micro: 12px;
  --text-script: 40px;

  /* Espaciado — §3 */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px;
  --space-9:128px; --space-10:160px;

  /* Radios y sombras — §5 */
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:28px;
  --shadow-sm: 0 1px 2px rgba(15,17,33,0.04);
  --shadow-md: 0 4px 16px rgba(15,17,33,0.06);
  --shadow-lg: 0 12px 32px rgba(15,17,33,0.08);

  /* Motion — §7 */
  --motion-fast:150ms;
  --motion-base:250ms;
  --motion-slow:400ms;
  --ease: cubic-bezier(0.4,0,0.2,1);

  --container-max: 1280px;
}

@media (max-width: 768px){
  :root{
    --text-display: 44px;
    --text-h1: 32px;
    --text-h2: 24px;
  }
}

/* Modo oscuro — solo re-tintamos las superficies claras (fondo blanco/crema).
   Las secciones ya oscuras de marca (hero, cta-band, footer) se mantienen igual
   en ambos modos, porque ya están diseñadas en navy/negro con texto claro. */
:root[data-theme="dark"]{
  --color-bg:#121327;
  --color-bg-soft:#1B1D36;
  --color-ink:#EEECEA;
  --color-ink-muted:#9C9EB0;
  --color-border:#2B2D45;
}