/* ==============================================================
   tokens.css — Design tokens de noedelaflor.com
   Fuente de verdad: documentacion/estilo-noedelaflor.md
   "Editorial cálido / Autoridad artesanal"

   Regla: NUNCA introducir un quinto color. Texto discreto =
   uno de los 4 colores con opacidad reducida.
   ============================================================== */

:root {
  /* --- Color (los únicos 4 del sistema) ----------------------- */
  --color-carbon: #241813;   /* fondo dominante: hero, CTA final, footer, nav */
  --color-crema:  #F5EDDC;   /* texto sobre oscuro; fondo de secciones de lectura */
  --color-oro:    #E0A82E;   /* acento único: CTAs, énfasis, hover — nunca fondo extenso */
  --color-marron: #6B5240;   /* sección puente: testimonios */

  /* Variantes con opacidad (verificadas WCAG en la ficha) */
  --color-crema-80: rgba(245, 237, 220, 0.8);   /* links footer */
  --color-crema-50: rgba(245, 237, 220, 0.5);   /* texto discreto sobre carbón, 4.59:1 AA */
  --color-crema-30: rgba(245, 237, 220, 0.3);   /* borde botón secundario sobre carbón */
  --color-crema-08: rgba(245, 237, 220, 0.08);  /* retícula de puntos del hero */
  --color-carbon-22: rgba(36, 24, 19, 0.22);    /* borde botón secundario sobre crema */
  --color-carbon-10: rgba(36, 24, 19, 0.1);     /* fondo del ítem abierto (Problema + Solución) */
  --color-marron-25: rgba(107, 82, 64, 0.25);   /* sombra de cards (Portafolio, Figma) */
  --color-oro-10:   rgba(224, 168, 46, 0.1);    /* relleno hover botón secundario */
  --color-oro-50:   rgba(224, 168, 46, 0.5);    /* acentos del copyright notice */
  --color-carbon-55: rgba(36, 24, 19, 0.55);    /* overlay detrás del panel mobile del nav */
  --color-carbon-62: rgba(36, 24, 19, 0.62);    /* texto discreto sobre crema (caption 404), 4.61:1 AA — mínimo que pasa */

  /* --- Tipografía --------------------------------------------- */
  /* Fraunces: solo pesos 600 y 600 italic (performance).
     Ejes SOFT / WONK se activan vía font-variation-settings
     cuando se necesiten — pendiente de definir por componente. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala modular: base 18px, ratio 1.333 (perfect fourth) */
  --text-caption: 0.75rem;    /* 12px — caption / nota */
  --text-label:   0.875rem;   /* 14px — label / badge / botón */
  --text-body:    1.125rem;   /* 18px — párrafo */
  --text-h3:      1.5rem;     /* 24px */
  --text-h2:      2rem;       /* 32px — títulos de sección */
  --text-h1:      2.6875rem;  /* 43px */
  --text-display: 3.5625rem;  /* 57px — hero */

  /* Tipografía fluida (estandares-tecnicos §1): mínimo en mobile (~375px),
     máximo = escala fija de arriba, alcanzado entre ~1000 y ~1400px de viewport.
     Se aplica del Hero en adelante; nav/footer/copyright conservan px fijos. */
  --fs-hero:    clamp(2.25rem,   1.5rem  + 3vw,    3.5625rem); /* 36px → 57px */
  --fs-h1:      clamp(1.75rem,   1.3rem  + 2vw,    2.6875rem); /* 28px → 43px */
  --fs-h2:      clamp(1.5rem,    1.2rem  + 1.2vw,  2rem);      /* 24px → 32px */
  --fs-h3:      clamp(1.25rem,   1.1rem  + 0.6vw,  1.5rem);    /* 20px → 24px */
  --fs-cta:     clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);   /* 17px → 20px — botones grandes (Hero) */
  --fs-body:    clamp(1rem,      0.95rem + 0.2vw,  1.125rem);  /* 16px → 18px */
  --fs-label:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);  /* 13px → 14px */
  --fs-caption: 0.75rem;                                        /* 12px — no necesita fluidez */

  --weight-body:    400;
  --weight-label:   500;
  --weight-display: 600;
  --weight-semibold: 600;  /* intros de Hero (Garantías) — Hanken Grotesk SemiBold */
  --weight-bold:    700;   /* logotipo del nav (letras) */
  --weight-black:   900;   /* logotipo del nav (signos < >) */

  --leading-tight: 1.1;
  --leading-body:  1.6;

  /* --- Espaciado (ritmo editorial: aire sobre densidad) ------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --section-padding: clamp(var(--space-6), 8vw, var(--space-8));

  /* --- Forma ---------------------------------------------------- */
  /* Redondeo sutil y consistente: ni angular puro ni pill */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* --- Layout --------------------------------------------------- */
  --container-max: 72rem;     /* 1152px */
  --container-narrow: 44rem;  /* legal / lectura larga */
  --container-gutter: clamp(var(--space-3), 4vw, var(--space-5));
  /* Altura del nav. Valor de respaldo: nav.js la mide y la actualiza en
     tiempo real (la altura real la determina el padding, no un valor fijo).
     Se usa para scroll-padding-top y para el panel mobile del menú. */
  --header-height: 4rem;

  /* Breakpoints del proyecto (no se pueden usar como var() dentro de
     @media — se listan aquí como referencia única):
       375px = 23.4375em | 768px = 48em | 1024px = 64em
       1440px = 90em
     Excepciones calculadas con anchos reales (ver layout.css):
       nav hamburguesa → desktop: 1376px = 86em
       footer apilado → columnas: 1080px = 67.5em
       cards de Precios apiladas → fila: 1092px = 68.25em */

  /* --- Movimiento (estandares-tecnicos, sección 3) --------------- */
  /* Duración */
  --ease-fast:   150ms;   /* micro-interacciones: hover de ícono, cambio de color puntual */
  --ease-base:   480ms;   /* hover estándar: links, botones, cambios de estado.
                             Era 280ms hasta sept 2026: Rey lo subió a 480ms tras validarlo
                             en el FAQ de Inicio — las micro-interacciones se sienten
                             deliberadas en vez de nerviosas. Es el default del proyecto. */
  --ease-slow:   450ms;   /* reveals, transiciones de layout, paneles (menú mobile).
                             Queda 30ms por debajo de --ease-base: ya no significa "más lento
                             que un hover", es la duración de los cambios de layout
                             (acordeones, filtro del Portafolio) que ya estaban validados. */
  --ease-slower: 700ms;   /* elementos grandes entrando en viewport, animaciones de página */

  /* Curvas */
  --curve-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* entrada/salida simétrica, uso general */
  --curve-out:      cubic-bezier(0, 0, 0.2, 1);      /* elementos que aparecen (ease-out) */
  --curve-in:       cubic-bezier(0.4, 0, 1, 1);      /* elementos que desaparecen (ease-in) */
  --curve-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot sutil — CTAs, énfasis */

  /* Atajos duración + curva (usados por .btn y .prose a en components.css).
     Antes eran "150ms ease" / "250ms ease" sin curva definida. */
  --transition-fast: var(--ease-fast) var(--curve-standard);
  --transition-base: var(--ease-base) var(--curve-standard);

  /* --- Subrayado animado (nav y footer): ::after con scaleX ------- */
  --link-underline-thickness: 1.5px;
  --link-underline-gap: 2px;      /* distancia bajo la caja de texto (≈4px bajo la línea base) */

  /* --- Foco (accesibilidad) ------------------------------------- */
  --focus-ring: 2px solid var(--color-oro);
  --focus-offset: 3px;

  /* --- Z-index ---------------------------------------------------- */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-cookie: 95;       /* banner de cookies: sobre el sitio y WhatsApp, debajo del nav */
}