/* ============================================================
   Vive Más CR — Design Tokens
   Fuente de verdad: design-system/tokens/tokens.json
   No edites este archivo a mano sin actualizar tokens.json.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* ---------- Primitivos: Noche (ancla de marca) ---------- */
  --vm-noche-900: 200 52% 10%;
  --vm-noche-800: 200 50% 15%;
  --vm-noche-700: 200 48% 23%;
  --vm-noche-600: 200 42% 31%;
  --vm-noche-500: 200 34% 42%;

  /* ---------- Primitivos: Cyan (energía / movimiento) ---------- */
  --vm-cyan-700: 196 100% 30%;
  --vm-cyan-600: 196 100% 34%;
  --vm-cyan-500: 195 100% 43%;
  --vm-cyan-400: 195 85% 55%;
  --vm-cyan-200: 195 80% 85%;

  /* ---------- Primitivos: Nicoya (naturaleza / Zona Azul) ---------- */
  --vm-nicoya-700: 172 55% 24%;
  --vm-nicoya-600: 172 48% 32%;
  --vm-nicoya-500: 172 42% 42%;
  --vm-nicoya-200: 172 35% 85%;

  /* ---------- Primitivos: Lima (vitalidad) ---------- */
  /* 600 es el lima del logotipo VIVE+. Uso exclusivo de marca. */
  --vm-lima-600: 66 100% 46%;
  --vm-lima-500: 68 92% 74%;
  --vm-lima-400: 66 100% 78%;
  --vm-lima-200: 66 100% 90%;

  /* ---------- Primitivos: Arena (registro premium) ---------- */
  --vm-arena-800: 38 60% 36%;
  --vm-arena-600: 38 48% 48%;
  --vm-arena-500: 38 55% 60%;
  --vm-arena-300: 38 55% 82%;
  --vm-arena-100: 38 50% 93%;

  /* ---------- Primitivos: Marfil (fondos cálidos) ---------- */
  --vm-marfil-50: 40 40% 97%;
  --vm-marfil-100: 40 33% 94%;
  --vm-marfil-200: 38 28% 89%;

  /* ---------- Primitivos: Tinta (texto) ---------- */
  --vm-tinta-900: 200 25% 11%;
  --vm-tinta-700: 200 14% 26%;
  --vm-tinta-500: 200 9% 44%;
  --vm-tinta-300: 200 10% 68%;

  /* ---------- Estado ---------- */
  --vm-exito: 172 48% 32%;
  --vm-aviso: 38 60% 36%;
  --vm-error: 3 71% 41%;
  --vm-info: 196 100% 30%;

  /* ============================================================
     Capa semántica — TEMA CLARO (por defecto)
     Usá SIEMPRE estos tokens en componentes, nunca los primitivos.
     ============================================================ */
  --bg: hsl(var(--vm-marfil-50));
  --surface: #ffffff;
  --surface-sunken: hsl(var(--vm-marfil-100));
  --surface-brand: hsl(var(--vm-arena-100));

  --text: hsl(var(--vm-tinta-900));
  --text-muted: hsl(var(--vm-tinta-700));
  --text-subtle: hsl(var(--vm-tinta-500));
  --text-on-brand: #ffffff;

  --border: hsl(var(--vm-marfil-200));
  --border-strong: hsl(var(--vm-tinta-300));

  --primary: hsl(var(--vm-noche-700));
  --primary-hover: hsl(var(--vm-noche-800));
  --primary-fg: #ffffff;

  --accent: hsl(var(--vm-cyan-500));
  --accent-text: hsl(var(--vm-cyan-700));
  --accent-fg: hsl(var(--vm-noche-900));

  --highlight: hsl(var(--vm-lima-500));
  --highlight-fg: hsl(var(--vm-noche-900));

  --premium: hsl(var(--vm-arena-500));
  --premium-text: hsl(var(--vm-arena-800));

  --focus-ring: hsl(var(--vm-cyan-700));

  /* ---------- Gradientes ---------- */
  --grad-noche: linear-gradient(160deg, hsl(var(--vm-noche-800)) 0%, hsl(var(--vm-noche-900)) 100%);
  --grad-profundo: linear-gradient(180deg, hsl(var(--vm-noche-700)) 0%, hsl(var(--vm-noche-900)) 100%);
  --grad-amanecer: linear-gradient(135deg, hsl(var(--vm-noche-700)) 0%, hsl(var(--vm-nicoya-600)) 55%, hsl(var(--vm-cyan-500)) 100%);
  --grad-velo: linear-gradient(180deg, hsl(var(--vm-noche-900) / 0) 0%, hsl(var(--vm-noche-900) / 0.55) 45%, hsl(var(--vm-noche-900) / 0.92) 100%);
  --grad-oro: linear-gradient(120deg, hsl(var(--vm-arena-500)) 0%, hsl(var(--vm-arena-300)) 50%, hsl(var(--vm-arena-500)) 100%);
  --grad-marfil: linear-gradient(180deg, hsl(var(--vm-marfil-50)) 0%, hsl(var(--vm-marfil-100)) 100%);

  /* ---------- Tipografía ---------- */
  --font-display: "Fraunces", "Merriweather", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-xl: clamp(3rem, 8vw, 6.5rem);
  --fs-display-lg: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-overline: 0.75rem;
  --fs-cifra: clamp(2.5rem, 5vw, 4rem);

  /* ---------- Espaciado ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
  --sp-32: 8rem;    --sp-40: 10rem;

  --section-sm: clamp(3rem, 6vw, 4.5rem);
  --section-md: clamp(4.5rem, 9vw, 7rem);
  --section-lg: clamp(6rem, 12vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Layout ---------- */
  --container-prosa: 68ch;
  --container-estrecho: 56rem;
  --container: 75rem;
  --container-ancho: 88rem;
  --grid-gap: clamp(1rem, 2.5vw, 2rem);

  /* ---------- Radios ---------- */
  --r-sm: 0.5rem;  --r-md: 0.875rem; --r-lg: 1rem;
  --r-xl: 1.5rem;  --r-2xl: 2rem;    --r-pill: 999px;

  /* ---------- Elevación ---------- */
  --e1: 0 1px 2px rgba(21,30,35,0.05), 0 1px 3px rgba(21,30,35,0.04);
  --e2: 0 2px 4px rgba(21,30,35,0.04), 0 6px 16px rgba(21,30,35,0.06);
  --e3: 0 4px 8px rgba(21,30,35,0.05), 0 16px 32px rgba(21,30,35,0.08);
  --e4: 0 8px 16px rgba(21,30,35,0.06), 0 32px 64px rgba(21,30,35,0.12);
  --e-oro: 0 8px 32px hsl(var(--vm-arena-500) / 0.28);
  --e-cyan: 0 8px 32px hsl(var(--vm-cyan-500) / 0.24);
  --e-interior: inset 0 1px 0 rgb(255 255 255 / 0.06);

  /* ---------- Movimiento ---------- */
  --d-instant: 80ms; --d-rapido: 160ms; --d-base: 240ms;
  --d-lento: 400ms;  --d-cine: 800ms;
  --ease-estandar: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-entrada: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-suave: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---------- Otros ---------- */
  --vidrio: saturate(180%) blur(20px);
  --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600;
}

/* ============================================================
   TEMA OSCURO — se aplica por sección con [data-tema="oscuro"]
   (el sitio es claro por defecto; las secciones oscuras son
   una decisión de diseño, no una preferencia del sistema)
   ============================================================ */
[data-tema="oscuro"] {
  --bg: hsl(var(--vm-noche-900));
  --surface: hsl(var(--vm-noche-800));
  --surface-sunken: hsl(var(--vm-noche-900));
  --surface-brand: hsl(var(--vm-noche-700));

  --text: hsl(var(--vm-marfil-50));
  --text-muted: hsl(var(--vm-marfil-200));
  --text-subtle: hsl(var(--vm-tinta-300));
  --text-on-brand: hsl(var(--vm-noche-900));

  --border: hsl(var(--vm-marfil-50) / 0.14);
  --border-strong: hsl(var(--vm-marfil-50) / 0.28);

  --primary: hsl(var(--vm-lima-400));
  --primary-hover: hsl(var(--vm-lima-200));
  --primary-fg: hsl(var(--vm-noche-900));

  --accent: hsl(var(--vm-cyan-400));
  --accent-text: hsl(var(--vm-cyan-400));
  --accent-fg: hsl(var(--vm-noche-900));

  --premium-text: hsl(var(--vm-arena-500));
  --focus-ring: hsl(var(--vm-lima-400));

  --e1: 0 1px 2px rgb(0 0 0 / 0.4);
  --e2: 0 6px 16px rgb(0 0 0 / 0.4);
  --e3: 0 16px 32px rgb(0 0 0 / 0.45);
  --e4: 0 32px 64px rgb(0 0 0 / 0.5);

  /* Imprescindible: redefinir --text no cambia nada por sí solo.
     El color se hereda ya resuelto desde <body> (tinta-900), así que todo
     lo que no declare color propio —empezando por los <h1>…<h4>— seguiría
     saliendo negro sobre el azul noche. Esta línea reengancha la herencia. */
  color: var(--text);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; }
h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; font-family: var(--font-body); }
p  { margin: 0 0 var(--sp-4); }

:where(a) { color: var(--accent-text); text-underline-offset: 0.2em; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

img, video, svg { max-width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}