/* ============================================================================
   TOKENS — Quindío Aventurero
   Fuente única de verdad visual. Ningún hex, tamaño ni duración literal
   debe existir fuera de este archivo (ARQ-04).

   Orden de capas: se declara aquí y solo aquí.
   ========================================================================== */

@layer reset, tokens, base, layout, components, blocks, utilities, spec;

@layer tokens {

  /* ---------------------------------------------------------------- color
     Roles semánticos, no colores sueltos. La tabla de contraste de §5.3 del
     plan maestro es normativa: coral y oliva NUNCA llevan texto blanco. */
  :root {
    --ink-900: #0F1B19;
    --ink-800: #132321;
    --ink-700: #1B3438;

    --paper-100: #FBF7EF;
    --paper-200: #F1E9D8;

    --coral-500: #EE7053;
    --coral-600: #D6572F;
    --olive-500: #90AA4E;
    --teal-500: #548B91;
    --solar-500: #E8A33D;

    --line-dark: rgba(251, 247, 239, 0.16);
    --line-light: rgba(15, 27, 25, 0.14);
    --line-strong: rgba(251, 247, 239, 0.42);

    --ink-muted: #4A524E;

    /* Superficies por tema, para no repetir condicionales en cada bloque */
    --surface-ink: var(--ink-900);
    --on-ink: var(--paper-100);
    --on-ink-muted: rgba(251, 247, 239, 0.72);
    --surface-paper: var(--paper-100);
    --on-paper: var(--ink-900);
    --on-paper-muted: var(--ink-muted);
  }

  /* ------------------------------------------------------------ tipografía
     Tres ROLES, no tres familias obligatorias.

     El rol de datos ya no usa monoespaciada: la letra de máquina de escribir
     se volvió tan reconocible como Inter y delata el diseño generado. La
     jerarquía de datos se construye ahora con VERSALITA + TRACKING + CIFRAS
     TABULARES sobre la misma grotesca, que es como trabajan las marcas
     deportivas y las revistas contemporáneas.

     Tres sistemas conmutables con [data-type-system] en cualquier elemento:
       a · Atlético  (por defecto)  Bricolage Grotesque + Schibsted Grotesk
       b · Editorial                Gloock + Schibsted Grotesk
       c · Suizo                    Archivo + Instrument Sans
     ------------------------------------------------------------------- */
  :root {
    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-data: var(--font-body);

    --fw-data: 600;
    --fw-display: 800;

    /* Escala fluida. Ratio ~1.25 en móvil, ~1.33 en escritorio. */
    --fs-900: clamp(2.25rem, 8.5vw, 6.25rem);
    --fs-800: clamp(2.1rem, 6vw, 4.25rem);
    --fs-700: clamp(1.75rem, 4vw, 3rem);
    --fs-600: clamp(1.35rem, 2.5vw, 1.875rem);
    --fs-500: clamp(1.0625rem, 1.6vw, 1.3125rem);
    --fs-400: clamp(1rem, 1.1vw, 1.0625rem);
    --fs-300: 0.875rem;
    --fs-200: 0.75rem;
    --fs-100: 0.6875rem;

    --tracking-display: -0.025em;
    --tracking-data: 0.06em;
    --tracking-label: 0.13em;

    --measure: 34em;          /* ~62–70 caracteres */
    --measure-tight: 26em;

    --leading-display: 0.92;
    --leading-body: 1.55;
  }

  /* b · EDITORIAL — serif de alto contraste para titulares.
     El serif aporta el aire de revista de viajes; el cuerpo sigue siendo
     grotesco para que la interfaz no se vuelva frágil. */
  [data-type-system="b"] {
    --font-display: "Gloock", Georgia, "Times New Roman", serif;
    --font-body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
    --fw-display: 400;
    --tracking-display: -0.012em;
    --leading-display: 0.96;
  }

  /* c · SUIZO — una grotesca variable para titulares y otra para texto.
     Sin serif, sin mono, sin adornos: solo peso, ancho y tracking. */
  [data-type-system="c"] {
    --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --fw-display: 800;
    --tracking-display: -0.03em;
  }

  /* -------------------------------------------------------------- espacio */
  :root {
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    --gutter: clamp(16px, 4.5vw, 24px);
    --margin: clamp(20px, 5.2vw, 96px);
    --maxw: 1440px;
    --head-h: 68px;
  }

  /* --------------------------------------------------------------- retícula */
  :root {
    --cols: 12;
    --grid: minmax(0, 1fr);
  }

  /* --------------------------------------------------------------- movimiento
     Cinco primitivas, una curva, tres duraciones (DA-17, DA-18). */
  :root {
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 700ms;
    --dur-2: 900ms;
    --dur-3: 1200ms;
  }

  /* ------------------------------------------------------------- decoración */
  :root {
    --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    --radius: 0;
    --focus: 2px solid var(--solar-500);
    --focus-offset: 3px;
  }
}

/* ============================== FUENTES ==================================
   Se sirven desde /assets/fonts. Mientras no existan, el stack de respaldo
   de cada rol mantiene la composición. Ver tools/fetch-fonts.mjs.
   Todas son SIL Open Font License 1.1.
   ======================================================================== */

/* --- Sistema A · Atlético ------------------------------------------------ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* --- Sistema B · Editorial ----------------------------------------------- */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

/* --- Sistema C · Suizo ---------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  font-style: normal;
}