/* ==========================================================================
   tokens.css · la marca en variables (un "token" = un valor de marca con nombre)
   --------------------------------------------------------------------------
   Fuentes:
   - materiales/marca/colores-y-degradados.json (6 colores + 5 degradados oficiales)
   - materiales/marca/brandbook.md (tipografía, radios, ángulo, reglas)
   - Escalas 100–900: Design System de Victor (claude.ai/artifact/2J1zi36jtArL3nv66WL5wx,
     project/tokens.json, leído el 2026-10-16). El brandbook dice "valores en el kit".
   Regla: ningún otro archivo escribe un color en HEX. Todo sale de aquí.
   Fuera de la marca a propósito: "Ácido/Luz", "Perla" y "Aurora" del JSON
   (interpretaciones del moodboard; Perla y Aurora traen morado/rosa → prohibido).
   ========================================================================== */

:root {
  /* ---- Colores de marca (el 500 es el color oficial) ---- */
  --digital-blue-100: #dee5ff;
  --digital-blue-200: #b2c3ff;
  --digital-blue-300: #7c98ff;
  --digital-blue-400: #4b73ff;
  --digital-blue-500: #2454ff;
  --digital-blue-600: #2149d9;
  --digital-blue-700: #1e3dae;
  --digital-blue-800: #1b3183;
  --digital-blue-900: #19275f;

  --acid-yellow-100: #fcffe0;
  --acid-yellow-200: #f7ffb7;
  --acid-yellow-300: #f1ff84;
  --acid-yellow-400: #ecff57;
  --acid-yellow-500: #e8ff32;
  --acid-yellow-600: #c2d531;
  --acid-yellow-700: #98a72f;
  --acid-yellow-800: #6e792d;
  --acid-yellow-900: #4a522c;

  --signal-red-100: #ffe2e4;
  --signal-red-200: #ffbcc1;
  --signal-red-300: #ff8d94;
  --signal-red-400: #ff636d;
  --signal-red-500: #ff414d;
  --signal-red-600: #d53a47;
  --signal-red-700: #a63140;
  --signal-red-800: #772939;
  --signal-red-900: #502233;

  --ice-blue-100: #f4fbff;
  --ice-blue-200: #e6f6ff;
  --ice-blue-300: #d4efff;
  --ice-blue-400: #c5eaff;
  --ice-blue-500: #b8e5ff;
  --ice-blue-600: #9bc0d9;
  --ice-blue-700: #7a97ae;
  --ice-blue-800: #596e83;
  --ice-blue-900: #3e4b5f;

  --soft-white: #f4f5f0;
  --midnight: #15182a;
  --blanco: #ffffff;

  /* ---- Roles (qué color hace qué; esto es lo que usan las secciones) ---- */
  --fondo: var(--blanco);                  /* fondo de página (mockup final: blanco, con paneles) */
  --panel: var(--soft-white);              /* paneles alternados (portada, Lo que cambió, Contacto) */
  --fondo-noche: var(--midnight);          /* footer y bloques oscuros */
  --superficie: var(--blanco);             /* tarjetas sobre soft-white */
  --superficie-hover: var(--ice-blue-100); /* único cambio de hover en tarjetas (sin sombra) */
  --tinta: var(--midnight);                /* texto principal (≈16:1 sobre soft-white) */
  --tinta-suave: var(--ice-blue-800);      /* texto secundario, captions (≈5:1 sobre soft-white) */
  --tinta-noche: var(--soft-white);        /* texto sobre midnight */
  --borde: #e4e5df;                        /* filetes; decorativo (del Design System) */

  --cta: var(--digital-blue-500);          /* LA acción: botón primario "Escríbeme" */
  --cta-hover: var(--digital-blue-600);
  --sobre-cta: var(--blanco);              /* blanco sobre #2454FF ≈ 5.5:1 → pasa AA */
  --cta-noche: var(--acid-yellow-500);     /* botón primario sobre midnight */
  --sobre-cta-noche: var(--midnight);
  --secundario-borde: var(--midnight);     /* botón secundario: contorno midnight */

  --energia: var(--acid-yellow-500);       /* chispa: resaltados, hitos grandes. Nunca texto sobre claro */
  --luz: var(--ice-blue-500);              /* posibilidad: línea de tiempo, fondos suaves */
  --impacto: var(--signal-red-500);        /* se usa poco; nunca botón; nunca junto al amarillo */

  --foco: var(--digital-blue-700);         /* anillo de foco sobre claro (≥3:1) */
  --foco-noche: var(--acid-yellow-500);    /* anillo de foco sobre midnight */

  /* ---- Degradados con nombre (solo estos cinco) ---- */
  --grad-amanecer: linear-gradient(135deg, #2454ff 0%, #b8e5ff 62%, #f4f5f0 100%);
  --grad-chispa: linear-gradient(135deg, #2454ff 0%, #b8e5ff 55%, #e8ff32 100%); /* luz detrás de fotos */
  --grad-senal: linear-gradient(160deg, #f4f5f0 0%, #ff8a91 55%, #ff414d 100%);
  --grad-hielo: linear-gradient(135deg, #2454ff 0%, #b8e5ff 70%, #f4f5f0 100%);
  --grad-neon: radial-gradient(120% 120% at 20% 80%, #2454ff 0%, #7fb8ff 45%, #b8e5ff 75%); /* sobre midnight */
  /* Velos Midnight sobre fotos (tríptico de Vida Agéntica): el texto blanco y amarillo queda AA */
  --velo-noche-0: rgb(21 24 42 / 0);
  --velo-noche-suave: rgb(21 24 42 / 0.26);
  --velo-noche-medio: rgb(21 24 42 / 0.6);
  --velo-noche-fuerte: rgb(21 24 42 / 0.9);
  /* Etiqueta editorial sobre foto (Mi historia): blanco casi opaco, el texto Midnight queda AA sobre cualquier foto */
  --etiqueta-foto: rgb(255 255 255 / 0.86);
  /* Botón de producto sin URL: gris, sin clic, con la etiqueta "Muy pronto" (regla del 16-oct) */
  --pronto-fondo: var(--borde);
  --pronto-tinta: var(--ice-blue-900);
  --glow-neon: 0 0 48px rgb(127 184 255 / 0.45); /* la ÚNICA sombra permitida; valor provisional, se afina en dirección de arte */

  /* ---- Tipografía: Geist, única familia ---- */
  --fuente: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-regular: 400;   /* cuerpo */
  --peso-medium: 500;    /* headline, wordmark, eyebrow */
  --peso-semibold: 600;  /* títulos de sección, botones */
  --peso-black: 900;     /* poster: una palabra */

  /* Tamaños: el máximo es el del brandbook (web); el mínimo es para 375 px.
     Los mínimos son provisionales: se afinan en la dirección de arte. */
  --t-poster: clamp(3.5rem, 2rem + 8vw, 6rem);        /* 56 → 96 px */
  --t-headline: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); /* 36 → 56 px */
  --t-title: clamp(1.625rem, 1.4rem + 1vw, 2rem);     /* 26 → 32 px */
  --t-body: 1.0625rem;                                /* 17 px */
  --t-eyebrow: 0.75rem;                               /* 12 px */
  --t-wordmark: 0.875rem;                             /* 14 px */
  --t-caption: 0.8125rem;                             /* 13 px */

  --lh-poster: 0.92;
  --lh-headline: 1;
  --lh-title: 1.1;
  --lh-body: 1.5;
  --lh-caption: 1.4;

  --tracking-poster: -0.03em;
  --tracking-headline: -0.02em;
  --tracking-title: -0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-wordmark: 0.28em;

  --medida-texto: 65ch; /* máximo 65 caracteres por línea */

  /* ---- Radios por rol ---- */
  --radio-0: 0;        /* símbolo recortado y franjas */
  --radio-chip: 8px;   /* chips, inputs */
  --radio-boton: 12px;
  --radio-tarjeta: 20px;
  --radio-simbolo: 28px;
  --radio-pildora: 999px; /* etiqueta "Muy pronto" */
  --radio-panel: var(--radio-simbolo); /* paneles Soft White: 28 px */

  /* ---- Espacio (base 8, del Design System) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;  /* medianil */
  --space-5: 32px;
  --space-6: 48px;  /* entre secciones (celular) */
  --space-7: 64px;
  --space-8: 72px;
  --space-9: 96px;
  --gutter: 16px;   /* margen lateral a 375 px */
  --ancho-max: 1100px; /* contenido dentro de los paneles (mockup final) */
  --panel-borde: clamp(10px, 1.7vw, 24px); /* separación del panel al borde de la ventana: 10 px celular, 24 px escritorio */
  --tactil-min: 44px; /* área táctil mínima */
  --menu-alto: 76px;  /* alto del menú dentro del panel de la portada (92 px en escritorio) */

  /* ---- Geometría ---- */
  --angulo: 56deg;          /* la diagonal del símbolo: cortes de foto, franjas */
  --opacidad-capa: 0.72;    /* capas del símbolo (rango 0.60–0.85) */
  --opacidad-luz: 0.55;     /* el símbolo como luz detrás de una persona */
  --opacidad-luz-portada: 0.6;    /* estado final de la firma: la luz Chispa detrás de la foto (mockup final) */
  --opacidad-silueta-portada: 0.25; /* …y la forma nítida del símbolo casi se disuelve en su halo */

  /* ---- Vidrio (tarjetas flotantes de la portada; luz Chispa detrás) ---- */
  --vidrio: rgb(244 245 240 / 0.62);       /* soft-white translúcido */
  --vidrio-borde: rgb(255 255 255 / 0.7);  /* filo de luz arriba, no sombra */
  --vidrio-desenfoque: 18px;

  /* ---- Movimiento (ficha aprobada en dirección de arte; pareja de M en js/movimiento.js) ---- */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);     /* entradas: ease-out fuerte (GSAP power4.out) */
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1); /* movimiento en pantalla (GSAP power3.inOut) */
  --dur: 0.9s;            /* entrada base */
  --dist: 24px;           /* recorrido de una entrada */
  --t-hover: 0.2s;        /* hover: color y fondo, curva ease */
  --t-hover-caja: 0.3s;   /* hover de las cajas de Cómo te ayudo: fondo, isotipo y foto */
  --t-marcador: 0.5s;     /* el resaltado amarillo que se pinta de izquierda a derecha */
  --t-press: 0.16s;       /* press de botón: scale 0.97 */
  --hover-elevar: -4px;   /* tarjetas suben 4 px, sin sombra */
}

@media (min-width: 900px) {
  :root { --menu-alto: 92px; }
}