/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */

:root {

  /* Color — core palette (CLAUDE.md, vigente). Nombres y hex exactos. */
  --color-bg-dark:   #1A1A1A;
  --color-bg-light:  #FAFAFA;
  --color-text-dark: #2D2D2D;
  --color-text-pink: #F9CDCD;

  /* Color — tokens extendidos, derivados matemáticamente de los 4 de
     arriba (color-mix). No son parte de la paleta core: cubren roles
     (texto largo en dark, muted, bordes, superficies, hover/accent) que
     esos 4 no resuelven por sí solos. Ver CLAUDE.md § paleta. */
  --color-text-soft: color-mix(in srgb, var(--color-text-pink) 80%, white);   /* cuerpo de texto largo sobre fondo oscuro */
  --color-muted:      color-mix(in srgb, var(--color-text-dark) 60%, var(--color-bg-light)); /* texto secundario — funciona en dark y light */
  --color-border:     color-mix(in srgb, var(--color-text-dark) 12%, var(--color-bg-light));  /* separadores sutiles */
  --color-surface:    color-mix(in srgb, var(--color-text-dark) 15%, var(--color-bg-light));  /* placeholders / rellenos neutros */
  --color-highlight:  color-mix(in srgb, var(--color-text-pink) 60%, var(--color-text-dark)); /* hover / acento — afinado para fondo oscuro (~6.8:1), falla AA en fondo claro (~2.9:1) */
  --color-highlight-on-light: color-mix(in srgb, var(--color-text-pink) 35%, var(--color-text-dark)); /* variante del highlight para body.page-light — ~5.3:1 sobre --color-bg-light, pasa AA */
  --color-available:  #5DB97A;   /* semáforo de estado, ajeno a la paleta de marca */

  /* Typography */
  --font-family: 'Scto Grotesk A', sans-serif;
  --font-headline: 'PP Fragment', var(--font-family);

  /* Headline scale — PP Fragment. 5 niveles fijos, tal como se usan en
     home; replicar exactamente estos tokens en el resto del sitio. */
  --fs-headline-0: 130px;
  --fs-headline-1: clamp(36px, 6vw, 80px);
  --fs-headline-2: clamp(32px, 4.5vw, 64px);
  --fs-headline-3: 56px;
  --fs-headline-4: 40px;

  --fs-h2:       clamp(22px, 2vw, 30px);
  --fs-h3:       clamp(20px, 1.8vw, 24px);   /* service-card-title */
  --fs-body-lg:  clamp(16px, 1.3vw, 20px);
  --fs-body:     clamp(14px, 1.5vw, 16px);
  --fs-label:    11px;
  --fs-work-index-title: 32px; /* work.html list view — .work-index-title, outside the 5-level headline scale */
  --fs-cta:      15px;   /* TODO: solo usado por .btn-primary (contact.html, diseño anterior) — eliminar junto con .btn-primary al migrar esa página a fs-btn */
  --fs-btn:      12px;   /* patrón real de botón del homepage: .btn-nav, .cta-showcase-btn, .footer-cta-btn */

  /* Excepción puntual: project-row-title usa fs-headline-4 (40px) fijo en
     desktop, pero en mobile necesita bajar de tamaño — no es parte de la
     escala de 5 niveles fijos, es un override responsive de un solo uso. */
  --fs-headline-4-mobile: 24px;

  /* Tracking */
  --tracking-display: -0.04em;
  --tracking-h1:      -0.03em;   /* Scto Grotesk A headings (fs-h2/fs-h3) */
  --tracking-h2:       0em;
  --tracking-label:    0.08em;   /* usado solo en páginas internas todavía no migradas al sistema del homepage */
  --tracking-cta:      -0.03em;  /* Scto Grotesk A uppercase (labels + botones) */

  /* Tracking — genérico, no atado a un componente (mismo criterio que los
     tokens de color extendidos: reutilizable en cualquier texto que
     necesite este ajuste, sin implicar un rol específico). */
  --tracking-tight:   -0.02em;

  /* Line height */
  --lh-display:   1.05;
  --lh-heading:   1.05;   /* PP Fragment */
  --lh-subhead:   1.2;    /* Scto Grotesk A headings (fs-h2/fs-h3) */
  --lh-uppercase: 1.1;    /* Scto Grotesk A uppercase (labels + botones) */
  --lh-body-lg:   1.45;   /* usado solo en páginas internas todavía no migradas al sistema del homepage */
  --lh-body:      1.5;

  /* Base spacing unit (1 = 4px, matches Tailwind convention) */
  --spacing: 4px;

  /* Spacing scale */
  --space-xs:  clamp(8px, 1vw, 12px);
  --space-sm:  clamp(16px, 2vw, 24px);
  --space-md:  clamp(24px, 3vw, 40px);
  --space-lg:  clamp(48px, 6vw, 80px);
  --space-xl:  clamp(64px, 8vw, 120px);
  --space-2xl: clamp(100px, 12vw, 160px);
  --space-3xl: clamp(160px, 16vw, 240px);

  /* Layout — content caps at 1280px (1440 frame − 80px margins); wider
     viewports grow the outer margin instead of the content */
  --container-max: 1440px;
  --container-pad: clamp(20px, 5.56vw, 80px);

  /* Navigation */
  --nav-height: 120px;
  --nav-btn-height: 40px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast:   0.2s;
  --duration-base:   0.35s;
  --duration-slow:   0.6s;
  --duration-slower: 0.9s;

  /* Border */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-pill: 999px;

  /* Z-index layers */
  --z-base:      1;
  --z-above:     10;
  --z-nav:       100;
  --z-overlay:   200;
  --z-cursor:    1000;
  --z-preloader: 9999;
}