/* ==========================================================================
   TOKENS — variables de diseño (colores, tipografías, medidas).
   --------------------------------------------------------------------------
   ¿Qué es una variable CSS? Un valor con nombre: --accent: #FF3B1F.
   Después se usa así: color: var(--accent).
   Si cambias el valor aquí, cambia en TODO el sitio.

   DIRECCIÓN ELEGIDA: 1 · Signal (data-direction="1" en index.html).
   Las direcciones 2 y 3 se quedan abajo como alternativas. Para probar
   una: cambia data-direction en index.html y agrega sus fuentes al
   <link> de Google Fonts (están anotadas en cada bloque).
   ========================================================================== */

:root {
  --paper: #F2F0EB;   /* blanco papel, cálido */
  --ink:   #0E0E0E;   /* negro profundo */

  --gutter: clamp(16px, 3.2vw, 48px);   /* margen lateral: 16px en celular, crece en desktop */
  --nav-h: 64px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);  /* arranca rápido, frena suave */

  --ui-size: clamp(11px, 0.78vw, 13px);
}

/* --------------------------------------------------------------------------
   DIRECCIÓN 1 — SIGNAL
   Editorial suizo / revista de música. Tipografía ancha y pesada,
   todo recto (sin inclinaciones). Acento: rosa de la paleta del hero.
   -------------------------------------------------------------------------- */
[data-direction="1"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: #FF4FA3;              /* rosa fuerte, de la paleta del hero */
  --on-accent: #0E0E0E;

  --font-display: "Archivo", system-ui, sans-serif;
  --display-weight: 800;
  --display-stretch: 125%;         /* Archivo es variable: 125% = versión "Expanded" */
  --display-transform: uppercase;
  --display-tracking: -0.02em;
  --display-leading: 0.82;
  --display-style-2: normal;       /* estilo de la segunda palabra (MAPPE) */

  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-ui: "Inter Tight", system-ui, sans-serif;
  --ui-transform: uppercase;
  --ui-tracking: 0.08em;
  --ui-weight: 500;

  --rot-factor: 0;                 /* 0 = fragmentos rectos */
  --frag-radius: 0px;

  --ph-bg: #E2DFD7;
  --ph-fg: rgba(14, 14, 14, .55);
  --ph-line: rgba(14, 14, 14, .14);
}

/* --------------------------------------------------------------------------
   DIRECCIÓN 2 — CEL / VHS  (alternativa · fuentes: Dela Gothic One, DM Mono)
   Anime de los 90 y cinta VHS. Fondo negro, títulos tipo title card
   japonés (Dela Gothic One), interfaz monoespaciada, azul "pantalla
   VHS", líneas de escaneo y aberración cromática.
   -------------------------------------------------------------------------- */
[data-direction="2"] {
  --bg: #0B0B0D;
  --fg: #ECEAE4;
  --accent: #3D5AFE;
  --on-accent: #FFFFFF;

  --font-display: "Dela Gothic One", system-ui, sans-serif;
  --display-weight: 400;
  --display-stretch: 100%;
  --display-transform: uppercase;
  --display-tracking: -0.01em;
  --display-leading: 0.92;
  --display-style-2: normal;

  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-ui: "DM Mono", ui-monospace, monospace;
  --ui-transform: uppercase;
  --ui-tracking: 0.02em;
  --ui-weight: 400;

  --rot-factor: 0.5;
  --frag-radius: 2px;

  --ph-bg: #17171B;
  --ph-fg: rgba(236, 234, 228, .5);
  --ph-line: rgba(236, 234, 228, .1);
}

/* --------------------------------------------------------------------------
   DIRECCIÓN 3 — CINEMA  (alternativa · fuente: Instrument Serif)
   Moda / cine de autor. Serif editorial enorme con la segunda palabra
   en cursiva, collage inclinado, acento verde ácido (tipo marcatextos).
   -------------------------------------------------------------------------- */
[data-direction="3"] {
  --bg: #EFEEE9;
  --fg: #111111;
  --accent: #C6F432;
  --on-accent: #111111;

  --font-display: "Instrument Serif", Georgia, serif;
  --display-weight: 400;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.035em;
  --display-leading: 0.86;
  --display-style-2: italic;

  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-ui: "Inter Tight", system-ui, sans-serif;
  --ui-transform: uppercase;
  --ui-tracking: 0.06em;
  --ui-weight: 500;

  --rot-factor: 1;                 /* inclinaciones completas: collage */
  --frag-radius: 0px;

  --ph-bg: #E1DFD8;
  --ph-fg: rgba(17, 17, 17, .5);
  --ph-line: rgba(17, 17, 17, .12);
}