/* =====================================================================
   Design tokens — única fuente de verdad del diseño.
   Colores, tipografía, espaciado, radios, bordes, capas y movimiento.
   El CSS los usa con var(--…) y el lienzo (JS) los lee con S.token()/S.rgba().
   Antes de escribir un valor nuevo en un componente, búscalo aquí;
   si no existe, añádelo aquí primero (con un nombre que diga para qué sirve).
   ===================================================================== */
:root {
  /* ---------- Color: primitivos ---------- */
  --color-paper: #f5f3ee;       /* fondo de papel */
  --color-ink: #141414;         /* tinta: texto y trazos */
  --color-ink-soft: #77746d;    /* tinta secundaria: pistas, etiquetas */
  --color-ink-faint: #9a978f;   /* tinta muy suave: números de línea, rótulos de columnas */
  --color-red: #d42a1e;         /* el único acento: paraguas, nombre, palabras clave */
  --color-mist: #e4e2dc;        /* vaho del cristal */
  --color-light: #fffff8;       /* luces de la calle */
  --color-night: #2a2927;       /* calle de noche (arriba) */
  --color-night-low: #46443f;   /* calle de noche (abajo) */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-floor: #ebe8e1;       /* suelo de ensayo de las simulaciones (Coreografías) */
  --color-seam: #d9d5cb;        /* juntas del suelo de ensayo */

  /* Canales RGB para transparencias en CSS: rgb(var(--rgb-ink) / 0.12) */
  --rgb-ink: 20 20 20;
  --rgb-paper: 245 243 238;
  --rgb-red: 212 42 30;

  /* ---------- Color: semánticos ---------- */
  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-text-soft: var(--color-ink-soft);
  --color-accent: var(--color-red);
  --selection-bg: var(--color-accent);      /* texto seleccionado: fondo rojo… */
  --selection-text: var(--color-paper);     /* …y letras claras, también si el texto era rojo */
  --color-rule: rgb(var(--rgb-ink) / 0.14);      /* líneas finas: bordes de la barra y del indicador */
  --color-wash: rgb(var(--rgb-ink) / 0.05);      /* fondo suave: código, notas, tablas */
  --color-accent-soft: rgb(var(--rgb-red) / 0.35); /* rojo translúcido: guías y líneas de acento */
  --veil-alpha: 0.8;

  /* ---------- Tipografía ---------- */
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-heavy: 'Archivo Black', 'Arial Black', Impact, sans-serif;

  --text-2xs: 9px;
  --text-nav-tiny: 10px;                  /* menú en móviles muy estrechos */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-canvas: 18px;                                  /* letras de la lluvia: todas iguales */
  --text-story: clamp(18px, 1.9vw, 26px);               /* texto de la historia */
  --text-story-tablet: clamp(18px, 4.6vw, 22px);
  --text-story-mobile: clamp(17px, 4.6vw, 20px);
  --text-story-compact: clamp(15px, 1.6vw, 19px);       /* pantallas bajas */
  --text-story-compact-mobile: clamp(15px, 4.4vw, 17px); /* móviles pequeños */
  --text-roles: clamp(13px, 1.15vw, 16px);
  --text-display: clamp(34px, 5vw, 72px);               /* BEAUTIFUL */
  --text-display-mobile: clamp(34px, 11vw, 48px);
  --text-giant: clamp(56px, 13vw, 180px);               /* p03try */
  --text-giant-mobile: clamp(56px, 18vw, 96px);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-story: 1.4;
  --leading-loose: 1.7;

  --tracking-name: 0.01em;
  --tracking-caps: 0.16em;

  /* ---------- Espaciado ---------- */
  --space-3xs: 3px;
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 10px;
  --space-md: 12px;
  --space-lg: 14px;
  --space-xl: 16px;
  --space-2xl: 18px;
  --space-3xl: 20px;
  --space-4xl: 32px;
  --space-5xl: 48px;
  --space-6xl: 80px;

  --gutter: clamp(20px, 7vw, 120px);        /* margen izquierdo del texto */
  --gutter-edge: clamp(20px, 4vw, 48px);    /* márgenes de la barra y las pistas */
  --gutter-mobile: var(--space-2xl);
  --gap-nav: clamp(14px, 3vw, 32px);

  /* Ritmo vertical del texto (en em, escala con el cuerpo) */
  --flow-line: 0.45em;
  --flow-line-mobile: 0.35em;
  --flow-line-compact: 0.3em;
  --flow-line-tight: 0.18em;
  --flow-block: 1.4em;
  --flow-rule: 0.9em;

  /* ---------- Radios y bordes ---------- */
  --radius-pill: 999px;
  --radius-track: 3px;
  --radius-drop: 0 50% 50% 50%;            /* gota: tres esquinas redondas */
  --size-drop: 11px;                        /* tamaño de la gota roja que cae antes de la firma */

  --border-hair: 1px;
  --border-ink: 1.5px;
  --border-strong: 2px;
  --underline-offset: 4px;

  /* ---------- Maquetación ---------- */
  --nav-h: 52px;
  --nav-h-mobile: 48px;
  --scroll-max: 1.6;                       /* velocidad máxima de la historia: pantallas por segundo */
  --scroll-ahead: 1.2;                     /* cuánto puede adelantarse la rueda (en pantallas) */
  /* Proyectos: la línea del tiempo */
  --shot-filter: grayscale(1) contrast(1.05);   /* imágenes de proyectos en blanco y negro */
  --logo-h: 44px;                          /* logos de los lugares de trabajo en la línea */
  --tl-gap: 44px;                          /* distancia de las tarjetas a la línea */
  --tl-gap-mobile: 22px;
  --tl-dot: 12px;                          /* punto donde cada proyecto brota de la línea */
  --tl-drop: 10px;                         /* gota roja en la punta de la tinta */
  --tl-gap-y: 32px;                        /* espacio mínimo entre tarjetas del mismo lado */
  --tl-stagger: 72px;                      /* distancia mínima entre una tarjeta y la siguiente (al otro lado) */
  --tl-branch-y: 0.7em;                    /* altura de la rama respecto a la tarjeta */
  --tl-left-mobile: 6px;                   /* posición de la línea en móvil */
  --nav-umbrella: 16px;                    /* paraguas junto al nombre */
  --nav-sound-icon: 18px;                  /* altavoz del sonido en la barra */
  --nav-sound-icon-small: 15px;            /* …en móviles */
  --nav-sound-icon-tiny: 12px;             /* …en móviles muy estrechos */
  --tap-pad-y: 12px;                       /* zona táctil extra (invisible) alrededor de enlaces pequeños */
  --tap-pad-x: 4px;
  --copy-top: clamp(96px, 17vh, 190px);
  --copy-top-tablet: 96px;
  --copy-top-compact: 72px;
  --copy-top-compact-mobile: 92px;
  --copy-top-compact-mobile-hello: 82px;     /* última escena en móviles muy bajos (no tiene pista) */
  --copy-top-mobile: 84px;
  --gutter-poem: clamp(20px, 6vw, 90px);
  --nf-text-top: 60vh;                      /* 404: el mensaje, bajo el número */
  --nf-text-top-mobile: 52vh;
  --poem-bottom-mobile: 330px;              /* el poema queda por encima del paraguas */
  --hint-top: calc(var(--nav-h) + var(--space-lg));
  --progress-bottom: 18px;

  /* Página del CV */
  --measure-page: 880px;                    /* ancho máximo del contenido */
  --col-year: 11ch;                         /* columna de años */
  --text-page-title: clamp(36px, 6vw, 64px);
  --text-section: clamp(20px, 2.4vw, 26px);
  --text-featured: clamp(24px, 3vw, 36px);      /* título del pensamiento destacado */

  /* Thoughts: lectura larga */
  --measure-text: 66ch;                         /* ancho cómodo de lectura */
  --text-article: clamp(16px, 1.2vw, 18px);     /* cuerpo de un pensamiento */
  --text-lead: clamp(18px, 1.6vw, 22px);        /* entradilla */
  --text-article-h3: clamp(17px, 1.4vw, 20px);
  --text-number: clamp(44px, 7vw, 88px);        /* cifras destacadas */
  --leading-article: 1.75;
  --stat-min: 150px;                            /* ancho mínimo de cada cifra destacada */

  /* Contacto */
  --text-email: clamp(20px, 3.4vw, 34px);      /* el email que cae como lluvia */
  --email-canvas-h: 3;                          /* alto del lienzo del email, en múltiplos del tamaño de letra */

  /* Foco visible (teclado) */
  --focus-ring: var(--border-strong) solid var(--color-accent);
  --focus-offset: 3px;
  --progress-track: 120px;
  --progress-track-mobile: 90px;

  /* Indicación inicial de «desliza» en la portada */
  --mouse-w: 34px;                          /* ratón dibujado de la indicación inicial */
  --mouse-h: 70px;
  --cue-corner-scale: 0.55;                 /* tamaño del ratón en la esquina */
  --cue-corner-space: 34px;                 /* sitio que dejan las pistas al ratón de la esquina */
  --info-size: 24px;                        /* botón de ayuda «i» */
  --info-panel-w: 340px;                    /* ancho del panel de ayuda */
  --shadow-panel: 4px 4px 0 var(--color-ink); /* sombra de tinta, como un sello */
  --cue-msg-w: 40ch;                        /* ancho del mensaje «usa la rueda del ratón» */
  --dur-wheel: 1.2s;                        /* la rueda del ratón baja cada… */

  /* Escena «investigación en la oscuridad» */
  --light-r: 130px;                         /* radio de la linterna */

  /* ---------- Capas (z-index) ---------- */
  --z-touch: 1;     /* zona táctil */
  --z-copy: 2;      /* texto, pistas, poema */
  --z-chrome: 30;   /* barra de navegación e indicador: siempre encima */

  /* ---------- Movimiento ---------- */
  --dur-fast: 0.3s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
  --ease: ease;
  --ease-drop: cubic-bezier(0.55, 0, 1, 0.6);

  /* ---------- Tinta viscosa (CSS y JS comparten estos valores) ---------- */
  --ink-bleed: 14px;     /* margen extra del lienzo para que el desenfoque no corte los bordes */
  --ink-blur: 5px;
  --ink-contrast: 24;

  color-scheme: light;
}