/* ============================================================
   GUILLERMO NIÑO — Design Tokens
   Arquitectura como materia en movimiento
   ============================================================ */

:root {
  /* ---- Color: cosmos / vacío / materia ---- */
  --negro-cosmos: #050505;      /* fondo principal — espacio, no "oscuro", VACÍO */
  --negro-superficie: #0D0D0C;  /* tarjetas, paneles, profundidad sutil */
  --negro-borde: #141412;

  --blanco-calido: #F5F5F2;     /* blanco protagonista — cálido, nunca agresivo */
  --plata: #B8B8B3;             /* jerarquía secundaria, mitad gris de la órbita */
  --grafito: #7C7C77;           /* terciario / deshabilitado */

  --linea-sutil: rgba(245, 245, 242, 0.10);
  --linea-media: rgba(245, 245, 242, 0.22);
  --halo-blanco: rgba(245, 245, 242, 0.35);
  --luz-calida: #F0E6C8;             /* único acento: luz arquitectónica cálida sutil */
  --halo-calido: rgba(240, 230, 200, 0.35);

  /* ---- Minerales — SOLO para interacción de palabras de PROCESO ----
     Oscuros, desaturados, espaciales. Nunca saturados, nunca infantiles. */
  --mineral-observar: #4A5D5A;
  --mineral-analizar: #5A5040;
  --mineral-abstraer: #4A4A5D;
  --mineral-fragmentar: #5D4A4A;
  --mineral-componer: #4A5D52;
  --mineral-transformar: #5D5540;
  --mineral-calcular: #454550;
  --mineral-modelar: #55504A;
  --mineral-materializar: #4F4F4F;

  /* ---- Tipografía ----
     Century Gothic es fuente comercial (Monotype), no distribuible como
     webfont gratuita. Jost es el sustituto geométrico más cercano
     disponible libremente (misma familia visual que Century Gothic/Futura).
     Ver README para instrucciones de reemplazo si se licencia la fuente original. */
  --font-principal: 'Jost', 'Century Gothic', 'Poppins', sans-serif;

  --fs-hero: clamp(2.4rem, 7vw, 5.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1.08rem;
  --fs-small: 0.92rem;
  --fs-label: 0.85rem;

  --tracking-hero: 0.22em;
  --tracking-wide: 0.16em;
  --tracking-mid: 0.08em;

  --lh-tight: 1.15;
  --lh-normal: 1.7;

  /* ---- Espaciado ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6.5rem;
  --space-2xl: 10rem;

  /* ---- Layout ---- */
  --max-width: 1440px;
  --radius: 2px; /* arquitectónico — casi sin redondeo */

  /* ---- Movimiento: lento, preciso, sutil ---- */
  --ease-arq: cubic-bezier(0.19, 1, 0.22, 1);
  --t-fast: 0.3s var(--ease-arq);
  --t-mid: 0.6s var(--ease-arq);
  --t-slow: 1.4s var(--ease-arq);
  --t-orbit: 3.2s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-mid: 0.01ms;
    --t-slow: 0.01ms;
    --t-orbit: 0.01ms;
  }
}