/*
  TITAN COMUNICACIÓN — Design Tokens
  Fuente única de verdad para color, tipografía, espaciado y transiciones.
  Cuando se migre a Astro + Tailwind, estos valores pasan tal cual a tailwind.config.
*/

:root {
  /* ---- Color ----
     Dirección visual: blanco roto dominante + carbón como contraste
     estratégico ("momentos de impacto": Hero, Modelo TITAN, CTA final,
     Footer, Header) + dorado suave como acento puntual, nunca dominante. */

  /* Superficies e ink oscuras (secciones de impacto) */
  --color-black: #171717;          /* Carbón — fondo de secciones de impacto */
  --color-charcoal: #202020;       /* Carbón secundario — superficies dentro de fondos oscuros */
  --color-white: #F5F4F0;          /* Blanco roto — texto sobre fondo oscuro */

  /* Superficies e ink claras (secciones dominantes) */
  --color-paper: #F5F4F0;          /* Blanco roto — fondo dominante */
  --color-paper-alt: #ECEAE3;      /* Blanco roto secundario — tarjetas / superficies sutiles sobre fondo claro */

  /* Acento */
  --color-gold: #B39A63;           /* Dorado TITAN suave — acento, uso puntual. NO TOCAR: color de marca para usos decorativos y para texto sobre fondo oscuro (contraste correcto ahí). */
  --color-gold-light: #D0BD8A;     /* Dorado claro — hover / detalle */
  --color-gold-text: #7a6943;      /* Variante SOLO para texto dorado sobre fondo claro (--color-paper): misma tonalidad, oscurecida lo mínimo necesario para cumplir WCAG AA (4.86:1 sobre #F5F4F0). No usar para fondos ni decoración. */

  /* Texto secundario */
  --color-warm-grey: #9A9A93;      /* Texto secundario sobre fondo oscuro */
  --color-dark-grey: #5F5F5A;      /* Texto secundario sobre fondo claro */

  --color-error: #C97361;          /* Estado de error del formulario (uso puntual). NO TOCAR: se mantiene para bordes/indicadores. */
  --color-error-text: #9d5a4c;     /* Variante SOLO para el texto de --color-error sobre fondo claro: cumple WCAG AA (4.77:1 sobre #F5F4F0). */

  /* Alfa utilitarios sobre fondo oscuro (líneas, overlays) */
  --color-gold-a15: rgba(179, 154, 99, 0.15);
  --color-gold-a30: rgba(179, 154, 99, 0.30);
  --color-white-a08: rgba(245, 244, 240, 0.08);
  --color-white-a12: rgba(245, 244, 240, 0.12);
  --color-black-a60: rgba(23, 23, 23, 0.6);
  --color-black-a85: rgba(23, 23, 23, 0.85);

  /* Alfa utilitarios sobre fondo claro (líneas, overlays) */
  --color-ink-a08: rgba(23, 23, 23, 0.08);
  --color-ink-a12: rgba(23, 23, 23, 0.12);

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-display-xl: clamp(3rem, 8vw, 7.5rem);   /* Hero H1 */
  --fs-display-lg: clamp(2.25rem, 5vw, 4.5rem); /* H2 secciones */
  --fs-display-md: clamp(1.5rem, 3vw, 2.25rem);
  --fs-body-lg: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body-md: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-normal: 1.55;

  --ls-wide: 0.14em;
  --ls-normal: 0;

  /* ---- Espaciado ---- */
  --space-section: clamp(5rem, 12vw, 10rem);
  --space-container-x: clamp(1.25rem, 5vw, 4rem);
  --max-width: 1440px;

  /* ---- Bordes / radios ---- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Transiciones ---- */
  --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;
  --dur-reveal: 700ms;       /* Scroll-reveal global (antes reutilizaba --dur-slow) */
  --dur-hover-media: 450ms;  /* Zoom de imagen en hover (antes reutilizaba --dur-slow) */

  /* ---- Header ---- */
  --header-h: 118px;
  --header-h-scrolled: 84px;
}