/* ═══════════════════════════════════════════════════
   ADN Studio — tokens
   Unica fuente de verdad. Ningun otro archivo define
   un color, un tiempo o un tamano literal.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Color ──
     Tres nombres, los que usamos al hablar del sitio. */
  --off-white:    #f4f3f7;   /* fondo */
  --gris-oscuro:  #1a1a1a;   /* titulares */
  --gris-claro:   #9b9b9b;   /* eyebrow, indicadores */

  --accent:       #ff5c00;   /* naranja ADN */

  /* ── Tipografia ── */
  --font: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro',
          'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-hero:    clamp(2.4rem, 5vw, 4.2rem);
  --fs-hero-sm: clamp(1.5rem, 7.8vw, 2.8rem);   /* movil */
  --fs-body:    clamp(0.85rem, 1.4vw, 1rem);
  --fs-label:   0.72rem;                         /* eyebrows, botones */
  --fs-nav:     0.6rem;

  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;

  --ls-tight: -0.025em;  /* titulares */
  --ls-label:  0.14em;   /* mayusculas */

  --lh-tight: 1.12;
  --lh-body:  1.45;

  /* ── Espaciado ── */
  --gutter:   clamp(1.5rem, 4vw, 3rem);
  /* Margen lateral del contenido. Lo comparten el header y el texto de
     Proyectos, para que arranquen alineados. */
  --margen:   clamp(2rem, 6.5vw, 6.5rem);
  --pad-sect: clamp(4rem, 8vw, 7rem);

  /* ── Forma ── */
  --r-card: 10px;
  --r-pill: 24px;
  --r-input: 20px;

  /* ── Movimiento ──
     Un solo easing para todo el sitio. Es lo que le da
     coherencia al movimiento: nada arranca ni frena distinto. */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    0.2s;
  --t-base:    0.6s;
  --t-slow:    0.9s;
  --t-reveal:  3.2s;   /* entradas con blur del hero */

  /* ── Capas ── */
  --z-canvas:  0;
  --z-content: 3;
  --z-overlay: 500;
  --z-nav:     505;
  --z-cursor:  9999;
}