/* ============================================================
   tokens.css — Sistema de design tokens · Club Noel
   Paleta = HEX reales extraídos de los 41 SVG (D-06, Interpretación B).
   Nunca hardcodear HEX en componentes: usar siempre estas variables.
   ============================================================ */

:root {
  /* ---- Marca: naranja ---- */
  --naranja-principal:  #f38200;  /* naranja más usado en el diseño */
  --naranja-secundario: #e57200;

  /* ---- Marca: navy ---- */
  --navy-principal:     #3a477b;  /* navy más usado (fondos, corazón) */
  --navy-secundario:    #35487f;

  /* ---- Marca: cyan ---- */
  --cyan-principal:     #86cef5;  /* cyan claro (corazones, acentos) */
  --cyan-saturado:      #009fe3;  /* azul saturado para énfasis */

  /* ---- Marca: magenta ---- */
  --magenta-principal:  #e71f85;  /* magenta de botones/acentos */
  --magenta-secundario: #e6007e;
  --magenta-terciario:  #cb328d;

  /* ---- Neutros ---- */
  --gris-base:          #bdb6b8;
  --blanco-1:           #fcfcfc;
  --blanco-2:           #f4f4f4;
  --texto-base:         #1d1d1b;

  /* ---- Roles semánticos (apuntan a los tokens de marca) ---- */
  --color-fondo:        var(--blanco-1);
  --color-texto:        var(--texto-base);
  --color-acento:       var(--naranja-principal);
  --color-boton:        var(--magenta-principal);
  --color-boton-2:      var(--navy-principal);

  /* ---- Tipografía ---- */
  --font-titulo: "Quicksand", system-ui, sans-serif;          /* Quicksand Bold */
  --font-cuerpo: "Quicksand", system-ui, sans-serif;          /* Quicksand Regular */
  --font-ui:     "Arial Rounded MT", "Quicksand", sans-serif; /* botones / UI */

  /* ---- Escala tipográfica (fluida, base 1920) ---- */
  --fs-display: clamp(2.4rem, 5.2vw, 5rem);
  --fs-h1:      clamp(2rem, 4vw, 3.6rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.4rem);
  --fs-body:    clamp(1rem, 1.5vw, 1.4rem);
  --fs-ui:      clamp(0.9rem, 1.1vw, 1.15rem);

  /* ---- Espaciado ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* ---- Timing de animación (coreografía) ---- */
  --dur-in:   720ms;   /* entrada de elementos */
  --dur-out:  420ms;   /* salida de elementos */
  --dur-slide: 600ms;  /* transición entre slides */
  --stagger:  110ms;   /* retardo incremental entre elementos */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutExpo suave */
  --ease-in:  cubic-bezier(0.55, 0, 0.6, 0.2);

  /* ---- Capas (z-index) ---- */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-menu: 200;
  --z-transition: 300;
}