/* ==========================================================================
   YAMIL RUMIE — DESIGN TOKENS
   Sistema centralizado. Todo lo demás en el proyecto consume estas variables.
   ========================================================================== */

:root {
  /* ==========================================================================
     PALETA — extraída de la referencia (ojo violeta/dorado/rosa) que mandaste.
     60% violeta (fondo dominante) · 30% dorado (tipografía/énfasis) · 10% rosa
     (único acento interactivo: links, botones, cursor, foco).
     El sitio pasa de fondo claro a fondo oscuro — es una identidad nueva, no
     un ajuste de color sobre la anterior.
     ========================================================================== */

  /* ---------- 60% — Violeta (fondo) ---------- */
  --color-bg:          #140a24; /* violeta casi negro — dominante, la mayoría del sitio */
  --color-bg-alt:       #201233; /* un paso más claro, para diferenciar superficies dentro del violeta */
  --color-violet-vivid:  #451181; /* el violeta real de la referencia — solo superficies grandes/glow, nunca texto (contraste insuficiente) */

  /* Texto — claro por default porque el fondo ahora es oscuro. Estos 3 tokens
     se REESCRIBEN dentro de .showreel/.manifesto/.services/.footer/.case-block--dark,
     los bloques que invierten a dorado claro (ver esos selectores). */
  --color-ink:          #f3ecf7;
  --color-ink-soft:      #c9b8d9;
  --color-muted:         #a494b8;
  --overlay-rgb:         243, 236, 247; /* mismo tono que --color-ink, en RGB crudo para rgba() con opacidad variable */
  --color-line:          rgba(var(--overlay-rgb), 0.14);

  /* ---------- 30% — Dorado (tipografía / énfasis) ---------- */
  --color-gold:          #f2d356; /* énfasis: <em> del headline, palabra del manifesto, hover de disciplinas */
  --color-emphasis:      var(--color-gold); /* se reescribe a --color-accent-text (rosa oscuro) dentro de los bloques invertidos */
  --color-inverse-bg:    #f2e4bb; /* dorado suave — el fondo de esos bloques invertidos, no el dorado puro (muy intenso para áreas grandes) */
  --color-inverse-ink:   #170b29; /* violeta casi negro — texto sobre el fondo dorado suave */

  /* ---------- 10% — Rosa (único acento interactivo) ---------- */
  --color-accent:       #e015d8; /* links, botones, cursor, hover, foco — sobre el violeta de fondo. Tono real extraído de la referencia (antes era un magenta más neón/plano) */
  --color-accent-ink:   #170b29; /* texto/ícono sobre un fill rosa: siempre violeta oscuro, nunca claro (falla de contraste) */
  --color-accent-text:  #830c7e; /* mismo rosa, oscurecido — para texto/foco DENTRO de los bloques invertidos (fondo dorado claro) */
  --color-focus:        var(--color-accent); /* anillo de foco — se reescribe a --color-accent-text dentro de los bloques invertidos */

  --color-surface:      #f2e4bb;

  /* ---------- Typography ---------- */
  /* Si compras la licencia de PP Neue Montreal, agregá el @font-face acá
     arriba de :root (o en un archivo aparte importado antes de este) con
     font-family: "PP Neue Montreal" — ya está primero en la lista de abajo
     después de Fjalla One, así que se activa solo, sin tocar ningún HTML.
     OJO — Fjalla One viene en un solo peso (400/regular), a diferencia de
     Bricolage Grotesque (que sí tenía 400–700 variable). Todo el
     font-weight:500/700/800 que sigue puesto en headings/hero/manifesto/
     etc. deja de tener efecto visual con esta tipografía activa — el
     navegador puede aplicar negrita falsa (peor legibilidad) en vez de
     ignorarlo silenciosamente. No se sacaron esos font-weight del resto
     del CSS (no son inertes si en el futuro se vuelve a una tipografía
     variable), pero con Fjalla One puesta, la jerarquía que antes venía
     del peso ahora depende de tamaño/color/tracking únicamente. */
  --font-display: "Fjalla One", "Neue Montreal", "PP Neue Montreal", "Instrument Sans", "Inter", -apple-system, sans-serif;
  --font-body:    "Instrument Sans", "Inter", -apple-system, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  /* Bajado de 11rem/8vw a 8.5rem/6vw: con el tope anterior el headline (dos
     líneas, tracking apretado) medía ~594px de alto en un viewport de
     900px — sumado al resto del hero (retrato, subtexto, CTA) el bloque
     entero llegaba a ~1950px, muy por encima de la pantalla. Como el hero
     queda "pinneado" (hero-showreel.js) mientras se transforma, lo que no
     entra en el primer viewport nunca llega a verse haciendo scroll normal
     — el botón de contacto quedaba efectivamente invisible. Este token solo
     lo usa .hero__headline (grep confirmado), así que bajarlo no afecta
     ningún otro tamaño de fuente del sitio. */
  --fs-hero:    clamp(3.2rem, 2rem + 5.5vw, 7.5rem);
  --fs-xxl:     clamp(2.4rem, 1.4rem + 4.5vw, 6.4rem);
  --fs-xl:      clamp(1.9rem, 1.2rem + 3vw, 3.8rem);
  --fs-lg:      clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  --fs-md:      clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  --fs-body:    clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --fs-sm:      clamp(0.82rem, 0.78rem + 0.15vw, 0.95rem);
  --fs-xs:      clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);

  --lh-tight:  0.92;
  --lh-snug:   1.08;
  --lh-normal: 1.4;
  --lh-loose:  1.7;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.14em;

  /* ---------- Spacing (fluid) ---------- */
  --space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-xs:  clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  --space-sm:  clamp(1.25rem, 1.05rem + 1vw, 2rem);
  --space-md:  clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --space-lg:  clamp(3rem, 2.2rem + 4vw, 6rem);
  --space-xl:  clamp(4.5rem, 3rem + 7.5vw, 10rem);
  --space-2xl: clamp(6rem, 4rem + 10vw, 14rem);

  /* Section side padding — responds to viewport, real "grid" */
  --edge: clamp(1.25rem, 0.9rem + 1.8vw, 3rem);

  /* ---------- Grid ---------- */
  --grid-columns: 12;
  --grid-gap: clamp(0.75rem, 0.5rem + 1.2vw, 1.5rem);

  /* ---------- Radius ---------- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);      /* expo-ish out, "premium" deceleration */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear:   linear;

  --dur-instant: 120ms;
  --dur-fast:    240ms;
  --dur-base:    420ms;
  --dur-slow:    700ms;
  --dur-slower:  1100ms;
  --dur-hero:    1800ms;

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-nav: 50;
  --z-cursor: 90;
  --z-transition: 100;
  --z-overlay: 80;

  /* ---------- Cursor ---------- */
  --cursor-size: 10px;
}

/* Reduced motion users get faster/none durations without a maze of conditionals elsewhere */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --dur-hero: 1ms;
  }
}