/* WebAndes Design Tokens */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ─────────────────────────────────────────────────────────────
     PALETA COMPLETA — inspirada en los Andes peruanos
     Cada color tiene un nombre que describe su origen geográfico
  ──────────────────────────────────────────────────────────────*/

  /* Cielo nocturno y madrugada */
  --c-medianoche:   #050d1a;   /* cielo antes del amanecer, casi negro */
  --c-abismo:       #0a1428;   /* noche andina profunda */
  --c-noche:        #0f1e3a;   /* noche con algo de luz */
  --c-azul-marino:  #1b2d4d;   /* azul marino de altura */
  --c-azul-andino:  #243a63;   /* azul cordillera */
  --c-neblina:      #3a4b6b;   /* niebla azul de madrugada */
  --c-cielo-alto:   #4a6080;   /* cielo a 4000m */
  --c-petrel:       #516173;   /* gris petrel, plumaje de ave andina */

  /* Tierra, piedra y arcilla */
  --c-pizarra:      #6b7a8e;   /* pizarra de los Andes */
  --c-piedra:       #8a9ab5;   /* piedra caliza clara */
  --c-arena-fria:   #b5bfcf;   /* arena volcánica fría */
  --c-qhapaq:       #847060;   /* camino inca, tierra cálida */
  --c-arcilla:      #a0826b;   /* arcilla rojiza de los valles */

  /* Amanecer y calor */
  --c-sol-naciente: #c45e3e;   /* sol justo al asomar */
  --c-terracota:    #d97a5b;   /* terracota del amanecer */
  --c-amanecer:     #e8936a;   /* luz naranja suave */
  --c-oro-solar:    #e3a857;   /* oro solar */
  --c-quillay:      #d4b86a;   /* árbol nativo, amarillo pálido */

  /* Claro de día, nevados */
  --c-hueso:        #f4ebdd;   /* hueso, color de la luz */
  --c-bone-mid:     #ece1cf;   /* hueso medio */
  --c-arena:        #ddccb9;   /* arena suave */
  --c-papel:        #faf6ef;   /* papel de alto gramaje */
  --c-crema:        #f6efe2;   /* crema andina */
  --c-nieve:        #fdfaf5;   /* nieve de los nevados */

  /* Vegetación de puna y yungas */
  --c-teal-logo:    #0e2e2c;   /* color oficial del logomark */
  --c-puna:         #1a4a3e;   /* verde puna oscuro */
  --c-totora:       #2e6b52;   /* verde totora (lago Titicaca) */
  --c-ichu:         #4a7a5e;   /* ichu, pasto de altura */
  --c-yungas:       #5c9e6e;   /* verde yungas claro */

  /* Agua */
  --c-lago:         #1a4a6b;   /* azul lago andino */
  --c-glaciar:      #c8dce8;   /* agua de glaciar, azul frío */

  /* ─────────────────────────────────────────────────────────────
     ROLES SEMÁNTICOS (mapean colores a intenciones)
  ──────────────────────────────────────────────────────────────*/

  /* Fondos */
  --bg:           var(--c-crema);
  --bg-alt:       var(--c-papel);
  --bg-dark:      var(--c-abismo);
  --bg-dark-alt:  var(--c-azul-marino);
  --bg-brand:     var(--c-teal-logo);

  /* Texto */
  --text-primary:      var(--c-abismo);
  --text-secondary:    var(--c-petrel);
  --text-tertiary:     var(--c-pizarra);
  --text-on-dark:      var(--c-hueso);
  --text-on-dark-dim:  var(--c-arena);
  --text-accent:       var(--c-terracota);

  /* Acento y énfasis */
  --accent:       var(--c-terracota);
  --accent-warm:  var(--c-amanecer);
  --accent-gold:  var(--c-oro-solar);
  --brand:        var(--c-teal-logo);

  /* Bordes */
  --border-light: rgba(27,45,77,.14);
  --border-dark:  rgba(244,235,221,.10);

  /* ─────────────────────────────────────────────────────────────
     TIPOGRAFÍA
  ──────────────────────────────────────────────────────────────*/

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-display:  clamp(54px, 9.5vw, 164px);
  --text-headline: clamp(36px, 5.2vw, 76px);
  --text-title:    clamp(22px, 2.4vw, 28px);
  --text-body:     16px;
  --text-small:    14px;
  --text-label:    11px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --lh-display:  1.1;
  --lh-headline: 1;
  --lh-title:    1.05;
  --lh-body:     1.65;
  --lh-tight:    1.25;

  --ls-display:  -0.035em;
  --ls-headline: -0.03em;
  --ls-title:    -0.02em;
  --ls-label:     0.2em;

  /* ─────────────────────────────────────────────────────────────
     ESPACIADO
  ──────────────────────────────────────────────────────────────*/

  --section-v:  clamp(80px, 10vw, 140px);
  --section-h:  clamp(20px, 4vw, 56px);
  --gap-xl:     clamp(48px, 6vw, 80px);
  --gap-lg:     clamp(28px, 4vw, 48px);
  --gap-md:     clamp(20px, 2.4vw, 32px);
  --gap-sm:     18px;
  --gap-xs:     10px;

  /* ─────────────────────────────────────────────────────────────
     BORDES Y RADIOS
  ──────────────────────────────────────────────────────────────*/

  --radius-pill:    999px;
  --radius-card:    18px;
  --radius-surface: 24px;
  --radius-mark:    8px;
  --radius-sm:      6px;

  /* ─────────────────────────────────────────────────────────────
     SOMBRAS
  ──────────────────────────────────────────────────────────────*/

  --shadow-form:  0 20px 60px -30px rgba(10,20,40,.5);
  --shadow-card:  0 4px 24px -8px rgba(10,20,40,.14);

  /* ─────────────────────────────────────────────────────────────
     MOTION
  ──────────────────────────────────────────────────────────────*/

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:  180ms;
  --duration-base:  320ms;
  --duration-slow:  560ms;

  /* ─────────────────────────────────────────────────────────────
     Z-INDEX
  ──────────────────────────────────────────────────────────────*/

  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;

}

/* ─────────────────────────────────────────────────────────────
   ALIASES — nombres cortos para compatibilidad con style.css
──────────────────────────────────────────────────────────────*/
:root {
  --color-ink:   var(--c-abismo);
  --color-navy:  var(--c-azul-marino);
  --color-slate: var(--c-pizarra);
  --color-cream: var(--c-crema);
  --color-paper: var(--c-papel);
  --color-bone:  var(--c-hueso);
  --color-sand:  var(--c-arena);
  --color-dusk:  var(--c-terracota);
  --color-gold:  var(--c-oro-solar);
  --color-teal:  var(--c-teal-logo);
}

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