/* YEMANJA — tokens
   Color, tipografía y espacio. Nada de esto se decide dos veces.
   Documentado en /brand/sistema.md */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Color -------------------------------------------------------------
     No hay un "color corporativo". Hay luz, agua, tierra y fuego.
     La base es hueso y noche; el agua y el fuego aparecen poco y por eso pesan. */
  --noche: #101614;
  --noche-suave: #1B2523;
  --hueso: #F3EEE4;
  --arena: #E4DACA;
  --arena-honda: #CDBFA9;
  --agua: #1E5C58;
  --agua-clara: #4F8E85;
  --fuego: #CE5729;
  --piedra: #6D6960;

  /* Roles */
  --fondo: var(--hueso);
  --texto: var(--noche);
  --texto-suave: var(--piedra);
  --linea: rgba(16, 22, 20, 0.14);
  --acento: var(--agua);

  /* --- Tipografía --------------------------------------------------------
     Fraunces para lo que se lee despacio. Archivo para lo que se lee de paso. */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto-fuente: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.2rem, 0.9rem + 1.1vw, 1.6rem);
  --t-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem);
  --t-2xl: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
  --t-3xl: clamp(2.4rem, 1.1rem + 5.4vw, 5.25rem);

  --alto-texto: 1.6;
  --alto-titular: 1.02;

  /* --- Espacio -----------------------------------------------------------
     Escala corta a propósito: el aire es parte del mensaje. */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.75rem;
  --e-4: 3rem;
  --e-5: 5rem;
  --e-6: clamp(5rem, 3rem + 9vw, 11rem);

  --margen: clamp(1.25rem, 0.6rem + 3vw, 5rem);
  --ancho: 84rem;
  --ancho-lectura: 40rem;

  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Grano: la fotografía llevará el suyo, esto lo llevan los fondos planos */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}