/* ==========================================================================
   tokens.css — Sistema de diseño
   --------------------------------------------------------------------------
   Traducción directa de docs/DISENO.md. Todos los valores están medidos sobre
   el Figma, no inferidos.

   Regla: a partir de aquí, ningún color, tamaño de fuente, espaciado, radio
   ni duración se escribe literal en el CSS. Todo sale de este archivo.

   Breakpoints (no pueden ser custom properties: @media no las resuelve).
   Se dejan documentados aquí y se escriben literales en las media queries:
       1440  base — único ancho presente en el Figma
        991  ≤ tablet
        767  ≤ móvil grande
        479  ≤ móvil
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ */
  /* 1. Color                                                            */
  /* ------------------------------------------------------------------ */

  /* Paleta — las 4 variables del Figma. `Beige` y `BG` eran el mismo hex
     (#F7F4F0) y se han unificado en un solo token. */
  --color-black: #000000;
  --color-gray: #333333;
  --color-white: #ffffff;
  --color-beige: #f7f4f0;

  /* Roles semánticos. El CSS de componentes usa estos, no la paleta. */
  --color-bg: var(--color-beige);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-beige);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-gray);
  --color-text-invert: var(--color-white);
  --color-footer-bg: var(--color-gray);
  --color-footer-heading: var(--color-beige);
  --color-rule: var(--color-gray);
  /* Línea divisoria entre bloques de las páginas de proyecto. */
  --color-rule-faint: rgba(51, 51, 51, 0.1);

  /* Botón. El Figma solo define hover para el primario (#333 → #000). */
  --btn-primary-bg: var(--color-gray);
  --btn-primary-bg-hover: var(--color-black);
  --btn-primary-text: var(--color-white);
  --btn-secondary-bg: var(--color-beige);
  --btn-secondary-text: var(--color-black);

  /* Enlaces del nav. No hay hover ni en el Figma ni en el original;
     se decidió #333 → #000 en 200ms, coherente con el botón. */
  --nav-link: var(--color-gray);
  --nav-link-hover: var(--color-black);
  --nav-link-active: var(--color-black);

  /* Fuera de la paleta a propósito: no es un color del sistema sino un acento
     con dos usos en todo el sitio, el punto del logo y el marco del retrato
     del hero de Home. Vive aquí solo para no quedar hardcodeado. */
  --accent-logo-dot: #cabeb0;

  /* ------------------------------------------------------------------ */
  /* 2. Tipografía                                                       */
  /* ------------------------------------------------------------------ */

  --font-heading: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tamaños. Nombrados por rol, no por escala: el Figma no sigue una
     progresión regular (ver docs/DISENO.md §3, incoherencias conocidas).

     FASE 6 — todos los tamaños de display son fluidos con clamp() en vez de
     saltar por breakpoint. El término central en vw está calculado para que
     el máximo se alcance ANTES de 1440px: a partir de ahí el valor queda
     clamped y el desktop mide exactamente lo que dice el Figma.

     El cuerpo (16 y 14px) NO escala. El texto de lectura no se encoge. */

  --fs-404: clamp(96px, 22vw, 300px);
  --fs-hero: clamp(40px, 7vw, 96px);
  --fs-title: clamp(36px, 6vw, 80px);
  --fs-h2-lg: clamp(34px, 5.4vw, 72px);
  --fs-h2: clamp(32px, 4.8vw, 64px);
  --fs-h2-sm: clamp(26px, 3.3vw, 44px);
  --fs-statement: clamp(22px, 3vw, 40px);
  --fs-h3: clamp(22px, 2.4vw, 32px);
  --fs-lead: clamp(20px, 2.4vw, 32px);
  --fs-h4: clamp(20px, 1.8vw, 24px);
  --fs-meta: clamp(18px, 1.5vw, 20px);
  --fs-body: 16px;         /* cuerpo de páginas de proyecto, nav, botones */
  --fs-body-sm: 14px;      /* texto corrido general, metadatos, tags */

  /* Interlineados */
  --lh-404: 0.8;           /* 240px sobre 300px */
  --lh-tight: 1;           /* titulares grandes */
  --lh-heading: 1.2;
  --lh-snug: 1.3;
  --lh-body: 1.4;
  --lh-relaxed: 1.5;       /* 21px sobre 14px */
  --lh-loose: 1.6;         /* cuerpo de páginas de proyecto */

  /* Tracking. Los titulares usan em para escalar bien al reducir el tamaño
     en los breakpoints. --ls-micro es una corrección óptica fija de -0.14px
     que el Figma aplica igual a 14px y a 16px, así que se deja en px. */
  --ls-tight: -0.03em;     /* 96/80/24px */
  --ls-tighter: -0.04em;   /* 72/64px */
  --ls-statement: -0.02em; /* 40px */
  --ls-lead: -0.025em;     /* 32px Inter */
  --ls-card: -0.033em;     /* 24px de tarjeta */
  --ls-micro: -0.14px;     /* texto pequeño */
  --ls-stat: -0.96px;      /* cifras de resultado: el Figma aplica el mismo
                              valor absoluto a 44px y a 24px */
  --ls-none: 0;

  /* ------------------------------------------------------------------ */
  /* 3. Espaciado                                                        */
  /* ------------------------------------------------------------------ */

  /* Escala base-4 reutilizable. */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Por encima de 48px el Figma deja de seguir la escala: son separaciones
     puntuales entre bloques. Van con nombre propio en vez de forzarlas
     dentro de la progresión base-4. */
  --gap-block: 60px;         /* h1 → primer bloque en página de proyecto */
  --gap-hero-meta: 76px;     /* metadatos → h1 (Home) */
  --gap-section: 80px;       /* offset superior de cada sección */
  --gap-hero-media: 100px;   /* imagen ↔ texto (hero de About) */
  --gap-hero-columns: 80px;  /* texto ↔ retrato (hero de Home) */
  --pad-hero-bottom: 100px;  /* cierre del hero de Home */
  --gap-expertise-num: 104px;/* número ↔ título (fila de Expertise) */
  --gap-section-lg: 120px;   /* padding vertical del hero de About */
  --pad-404: 140px;          /* padding vertical del bloque 404 */
  --gap-hero-tagline: 145px; /* h1 → "UI Designer." (Home) */
  --gap-hero-next: 150px;    /* hero → bloque "About Me" (Home) */

  /* ------------------------------------------------------------------ */
  /* 4. Layout                                                           */
  /* ------------------------------------------------------------------ */

  --page-gutter: 12px;        /* margen del body: 1440 → 1416 */
  --container-padding: 20px;
  --container-max: 1200px;
  --nav-height: 63px;
  /* El Figma fija el bloque del titular de sección en 84px. Con un h2 de
     64px eso deja 8px de aire debajo; con el de 72px encaja justo. */
  --head-title-block: 84px;

  /* Rejilla de proyectos: columnas asimétricas que se alternan por fila. */
  --hero-portrait-w: 493px;   /* alto: ver --aspect-portrait */

  /* Rejilla de Experience (About): 2×2 de 596px con 8px de separación. */
  --grid-experience: 596px;
  --experience-card-h: 516px;
  --logo-mark-w: 97px;
  --logo-mark-h: 67px;

  --grid-project-wide: 654px;
  --grid-project-narrow: 498px;
  --grid-project-gap: var(--space-12);
  --project-thumb-height: 437px;

  /* Proporciones de imagen.

     OJO: `aspect-ratio` NO acepta unidades. Escribirlo como
     `var(--grid-project-wide) / var(--project-thumb-height)` resuelve a
     `654px / 437px`, que es inválido y el navegador lo descarta en silencio:
     la imagen cae a su proporción intrínseca y parece funcionar. Por eso
     estos tokens van sin px, aparte de los de tamaño. */
  --aspect-card: 654 / 437;          /* tarjeta ancha; la única bajo 992 */
  --aspect-portrait: 493 / 577;      /* retrato de Home y foto de About */
  --aspect-media-cover: 1200 / 620;  /* portada de proyecto */
  --aspect-media-mid: 1200 / 700;
  --aspect-media-tall: 1200 / 800;
  --aspect-media-pair: 594 / 555;
  --aspect-media-pair-tall: 594 / 603;

  /* Los altos de imagen ya no son tokens sueltos: viven dentro de las
     proporciones de arriba, que es donde importan. */

  /* Anchos de columna de texto presentes en el Figma. */
  --measure-expertise-row: 1078px; /* fila de Expertise, dentro de un hueco de 1152 */
  --measure-statement: 860px;
  --measure-about-col: 650px;      /* columna de texto del hero de About */
  --measure-bio: 600px;
  --measure-experience: 430px;     /* contenido de la tarjeta de Experience */
  --measure-wide: 570px;
  --measure-footer: 480px;
  /* El bloque interior del footer es un frame de altura fija en el Figma y su
     contenido solo llena 257px: los 34px restantes son aire real, visible
     bajo el botón. Se replica con min-height. */
  --footer-inner-h: 291px;
  --measure-narrow: 286px;

  /* ------------------------------------------------------------------ */
  /* 5. Radios                                                           */
  /* ------------------------------------------------------------------ */

  --radius-btn: 4px;
  --radius-nav: 16px;      /* solo esquinas inferiores */
  --radius-card: 20px;
  --radius-media: 24px;
  --radius-media-lg: 30px; /* hero de About */
  --radius-pill: 100px;

  /* ------------------------------------------------------------------ */
  /* 6. Sombras                                                          */
  /* ------------------------------------------------------------------ */

  /* El Figma no declara ni una. La jerarquía se resuelve con contraste de
     fondo (#FFFFFF sobre #F7F4F0) y radio. Token presente solo para el
     anillo de foco, que sí necesitamos por accesibilidad. */
  --shadow-none: none;

  /* Única sombra del sitio. No viene del Figma —el Figma no tiene diseño móvil—
     sino del panel del menú móvil del original. Ver ANIMACIONES.md §5.6. */
  --shadow-menu: 0 1px 3px rgba(0, 0, 0, 0.09), 0 0 2px rgba(0, 0, 0, 0.15);

  /* ------------------------------------------------------------------ */
  /* 7. Motion                                                           */
  /* ------------------------------------------------------------------ */

  /* Easings del original, traducidos desde Webflow (docs/ANIMACIONES.md §8). */
  --ease-linear: linear;
  /* El easing del SplitText (power4.inOut) no aparece aquí: solo lo usa
     animations.js, y GSAP lo pide por nombre, no como cubic-bezier. */
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);   /* outQuint / power4.out */

  /* Duraciones */
  --dur-hover: 200ms;      /* decisión nueva: botón y enlaces del nav */
  --dur-slide-in: 400ms;   /* familia «slide in» */
  --dur-zoom: 500ms;       /* zoom de tarjeta de proyecto */
  --dur-menu: 500ms;       /* menú móvil */
  --dur-nav-icon: 500ms;   /* barras de la hamburguesa — CORREGIDO en la Fase 2.
                              Los 300 ms de la Fase 1 eran los del dropdown del nav,
                              que se descarta. ANIMACIONES.md §5.6: 500 ms linear. */
  --dur-split: 600ms;      /* SplitText del h1 */

  /* Familia «slide in»: 6 variantes idénticas salvo el delay.
     a-12 → a-28 del IX2 original. */
  --delay-slide-1: 200ms;  /* a-12 */
  --delay-slide-2: 300ms;  /* a-24 */
  --delay-slide-3: 400ms;  /* a-25 */
  --delay-slide-4: 500ms;  /* a-26 */
  --delay-slide-5: 600ms;  /* a-27 */
  --delay-slide-6: 700ms;  /* a-28 */

  --slide-in-offset: 50px; /* translateY inicial */
  --slide-in-blur: 10px;   /* filter: blur inicial */

  /* SplitText */
  --split-stagger: 0.4;    /* segundos repartidos entre TODOS los caracteres */

  /* ------------------------------------------------------------------ */
  /* 8. Capas                                                            */
  /* ------------------------------------------------------------------ */

  --z-nav: 99;             /* mismo valor que .nav-section del original */
  --z-menu: 100;
  --z-skip-link: 200;
}

/* ==========================================================================
   Fase 6 — el espaciado por breakpoint
   --------------------------------------------------------------------------
   El original resuelve esto redefiniendo sus propios tokens de espaciado en
   cada media query, y sus valores se trasladan casi uno a uno:

       spacing-l   80 → 60 → 40 → 40     (padding de sección)
       spacing-xl  100 → 60 → 60 → 40    (cierre del hero)
       spacing-xxl 150 → 100 → 60 → 40   (separaciones grandes)
       spacing-m   60 → 60 → 40 → 40

   Los tokens sin equivalente directo (--gap-section-lg, --gap-hero-tagline,
   --pad-404) se escalan siguiendo la misma proporción.
   ========================================================================== */

@media screen and (max-width: 991px) {
  :root {
    --gap-block: 60px;
    --gap-hero-meta: 60px;
    --gap-section: 60px;
    --gap-hero-media: 40px;
    --gap-hero-columns: 40px;
    --pad-hero-bottom: 60px;
    --gap-expertise-num: 40px;
    --gap-section-lg: 80px;
    --pad-404: 100px;
    --gap-hero-tagline: 100px;
    --gap-hero-next: 100px;

    --grid-project-gap: 40px;
    /* El original baja la tarjeta de Experience de 516 a 350 aquí. */
    --experience-card-h: 350px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    /* El original estrecha el marco de la página de 12 a 10px. */
    --page-gutter: 10px;

    --gap-block: 40px;
    --gap-hero-meta: 40px;
    --gap-section: 40px;
    --gap-hero-media: 20px;
    --gap-hero-columns: 20px;
    --pad-hero-bottom: 60px;
    --gap-expertise-num: 24px;
    --gap-section-lg: 60px;
    --pad-404: 60px;
    --gap-hero-tagline: 60px;
    --gap-hero-next: 60px;

    --experience-card-h: 300px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --gap-block: 40px;
    --gap-section: 40px;
    --pad-hero-bottom: 40px;
    --gap-section-lg: 40px;
    --pad-404: 40px;
    --gap-hero-tagline: 40px;
    --gap-hero-next: 40px;

    --grid-project-gap: 20px;
  }
}