/* ==========================================================================
   andreuinglada.com V3 · Tokens del sistema de diseño
   Guía viva: /lab/estilos/

   Los tamaños fluidos van de 360 px a 1440 px de ancho de ventana:
   clamp(mínimo, base + pendiente·vw, máximo).
   Duraciones y curvas tienen su equivalente para anime.js en
   /assets/js/utils/motion.js (DURATION y EASE): mantener los dos en sincronía.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Color
     ------------------------------------------------------------------------ */
  --color-paper: #f7f6f2;        /* fondo, blanco roto */
  --color-ink: #0f0f0f;          /* texto y fondos oscuros */
  --color-muted: #6e6e69;        /* texto secundario sobre papel (4,74:1) */
  --color-muted-on-ink: #8a8a85; /* texto secundario sobre tinta (5,53:1) */
  --color-accent: #ff3b1f;       /* solo el punto de "disponible" (no apto para texto) */
  --color-error: #b42318;        /* errores de formulario (6,1:1 sobre papel); no es el acento */

  /* Color de cada proyecto (mates; contraste AAA con su texto) */
  --project-daycup: #50392b;
  --project-eurodrive: #f4f1eb;
  --project-maisseclub: #2c4237;
  --project-team3fitness: #60302e;
  --project-pascualvidal: #2a3f5b;
  --project-text: #f7f6f2;           /* texto sobre todos… */
  --project-text-eurodrive: #343638; /* …salvo Eurodrive */

  /* Placeholder del showreel de la home (naranja claro), hasta que haya vídeo */
  --color-showreel: #f6c9a0;

  /* Fondo de la página en la sección de proyectos de la home (page-color.js).
     Cambio desactivado (index.html). La tinta del footer, con su mismo gris secundario (papel
     17,7:1; gris 5,5:1). Antes, grafito #2a2927 con gris #adaca6. */
  --color-graphite: var(--color-ink);
  --color-muted-on-graphite: var(--color-muted-on-ink);
  --color-muted-on-paper: #6e6e69; /* el gris secundario de siempre, para mezclarlo */

  /* Placeholder de la foto de Sobre mí (sobre papel) */
  --color-about-photo: #e4dfd6;

  /* Placeholders de las filas de Sobre mí (MaisseClub usa su color de proyecto) */
  --color-row-upra: #3b4652;
  --color-row-aef: #5a4632;

  /* Placeholders de «Otros trabajos» en la home (oscuros: texto papel AAA) */
  --color-story-1: #3a3631;
  --color-story-2: #2d383d;
  --color-story-3: #433a2a;
  --color-story-4: #382e39;

  /* ------------------------------------------------------------------------
     Tipografía
     Display: EB Garamond 400 (+ cursiva 400 para detalles). Texto: Inter 400/500.
     Las @font-face están en main.css. Cambiar de familia es tocar estas dos líneas.
     ------------------------------------------------------------------------ */
  --font-display: "EB Garamond", "EB Garamond Fallback", Garamond, "Times New Roman", serif;
  --font-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --weight-display: 400;     /* único peso de la display */
  --weight-text: 400;
  --weight-text-strong: 500; /* énfasis, nombres de proyecto, botones */

  /* Escala: pocos tamaños, con nombre de uso (360 → 1440 px) */
  --text-menu:  clamp(2.5rem, 1.917rem + 2.593vw, 4.25rem);   /* 40 →  68 px · menú a pantalla completa (tamaño Collins) */
  --text-hero:  clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);    /* 40 →  72 px · frases protagonistas (como Collins) */
  --text-title: clamp(2rem, 1.5rem + 2.222vw, 3.5rem);        /* 32 →  56 px · títulos de página y case study */
  --text-lead:  clamp(1.25rem, 1.125rem + 0.556vw, 1.625rem); /* 20 →  26 px · entradillas, nombres en galería */
  --text-body:  clamp(1rem, 0.958rem + 0.185vw, 1.125rem);    /* 16 →  18 px · cuerpo */
  --text-small: 0.875rem;                                     /* 14 px · fichas, etiquetas, interfaz */

  --leading-display: 1;     /* menú y hero */
  --leading-title: 1.1;
  --leading-lead: 1.4;
  --leading-body: 1.55;
  --tracking-display: -0.01em;

  --measure: 60ch;          /* ancho de lectura (Inter) */

  /* ------------------------------------------------------------------------
     Espaciado (base 4 px; los pasos grandes son fluidos)
     ------------------------------------------------------------------------ */
  --space-3xs: 0.25rem;                                 /*  4 px */
  --space-2xs: 0.5rem;                                  /*  8 px */
  --space-xs:  0.75rem;                                 /* 12 px */
  --space-s:   1rem;                                    /* 16 px */
  --space-m:   1.5rem;                                  /* 24 px */
  --space-l:   2rem;                                    /* 32 px */
  --space-xl:  clamp(2rem, 1.667rem + 1.481vw, 3rem);   /* 32 →  48 px */
  --space-2xl: clamp(3rem, 2.333rem + 2.963vw, 5rem);   /* 48 →  80 px */
  --space-3xl: clamp(4rem, 2.667rem + 5.926vw, 8rem);   /* 64 → 128 px */
  --space-4xl: clamp(6rem, 4rem + 8.889vw, 12rem);      /* 96 → 192 px */

  --gutter: clamp(1rem, 0.5rem + 2.222vw, 2.5rem);     /* margen lateral: 16 → 40 px */
  --container: 80rem;   /* ancho máximo de la columna de contenido (1280 px); en pantallas grandes, el resto es margen */

  /* ------------------------------------------------------------------------
     Radios
     ------------------------------------------------------------------------ */
  --radius-s: 8px;      /* miniaturas pequeñas, campos */
  --radius-m: 12px;     /* imágenes en móvil */
  --radius-l: 16px;     /* imágenes y tarjetas de galería */
  --radius-pill: 999px; /* botones píldora, navegación flotante */

  /* Sombras: ninguna por ahora. La profundidad la dan el color y el movimiento. */

  /* ------------------------------------------------------------------------
     Movimiento (anime.js: DURATION, EASE y SPRING en utils/motion.js)
     ------------------------------------------------------------------------ */
  --duration-fast: 200ms;   /* hover, cambios de color */
  --duration-base: 400ms;   /* estados de interfaz, aparición de elementos pequeños */
  --duration-slow: 700ms;   /* entradas y revelados de texto */
  --duration-slower: 1100ms; /* intro y transiciones entre vistas */
  --duration-page-tone: 500ms; /* fundido del fondo de página (page-color.js) */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* entradas: arranca rápido y frena suave */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* desplazamientos de ida y vuelta */
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);    /* salidas: acelera al irse */

  /* Muelles: los mismos tres de SPRING (motion.js), aproximados con linear().
     Para hovers y transiciones solo con CSS. Se usan siempre con su duración:
     transition: transform var(--spring-snappy-duration) var(--spring-snappy); */
  /* muelles:inicio · generado por `node scripts/muelles.mjs`: no editar a mano */
  --spring-soft: linear(0, 0.0343, 0.1158, 0.2205, 0.3324, 0.4415, 0.5421, 0.6312, 0.7079, 0.7722, 0.8251, 0.8678, 0.9017, 0.9282, 0.9486, 0.9641, 0.9756, 0.984, 0.9901, 0.9943, 0.9972, 0.9992, 1.0004, 1.001, 1.0014, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.0009, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1);
  --spring-soft-duration: 1180ms; /* bounce 0.1, duración percibida 650 ms */
  --spring-snappy: linear(0, 0.0568, 0.1895, 0.3535, 0.5192, 0.6685, 0.7924, 0.8881, 0.957, 1.0026, 1.0296, 1.0427, 1.046, 1.0431, 1.0369, 1.0294, 1.0218, 1.015, 1.0093, 1.005, 1.0019, 0.9998, 0.9986, 0.998, 0.9979, 0.998, 0.9983, 0.9987, 0.999, 0.9993, 0.9996, 0.9998, 0.9999, 1, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1);
  --spring-snappy-duration: 820ms; /* bounce 0.3, duración percibida 350 ms */
  --spring-playful: linear(0, 0.0875, 0.2954, 0.5496, 0.7929, 0.989, 1.1216, 1.1901, 1.2046, 1.1807, 1.1352, 1.0827, 1.0341, 0.9961, 0.9714, 0.9596, 0.9584, 0.9644, 0.9742, 0.985, 0.9947, 1.002, 1.0065, 1.0085, 1.0084, 1.007, 1.0049, 1.0027, 1.0008, 0.9994, 0.9985, 0.9982, 0.9983, 0.9986, 0.9991, 0.9995, 0.9999, 1.0002, 1.0003, 1.0004, 1);
  --spring-playful-duration: 1720ms; /* bounce 0.55, duración percibida 600 ms */
  /* muelles:fin */
}