/**
 * tokens.css — Sistema de diseño: Mallorca Solar Green
 *
 * Este fichero centraliza todos los custom properties (tokens de diseño)
 * del sistema. Importar antes que cualquier otro CSS.
 *
 * Estética: "Editorial mediterráneo verde-sol"
 * Referencia: revista arquitectura + Aesop + folleto turístico vintage 70s + aceite oliva premium mallorquín
 */

:root {

  /* ─── PALETA DE COLOR ─────────────────────────────────────────────────
   *
   * Colores principales del sistema. Inspirados en el paisaje mallorquín:
   * tierra, olivos, mar, sol y piedra calcárea.
   * ─────────────────────────────────────────────────────────────────── */

  /* Tinta: el negro profundo para texto y bordes estructurales */
  --ink:   #0F1417;

  /* Hueso: el blanco cálido de fondo, como papel envejecido */
  --bone:  #F4EFE6;

  /* Verde: el verde olivo mallorquín, color corporativo principal */
  --green: #4F6B2E;

  /* Sol: el amarillo dorado mediterráneo, acento y CTA */
  --sun:   #E8A317;

  /* Mar: el azul profundo del Mediterráneo, secciones oscuras */
  --sea:   #1E3A52;

  /* Arcilla: el terracota de la tierra balear, alertas y acentos cálidos */
  --clay:  #C7613A;

  /* Piedra: el gris neutro de la piedra calcárea, texto secundario */
  --stone: #8A8478;

  /* Niebla: el blanco roto más oscuro, fondos alternativos */
  --mist:  #E4DDD0;


  /* ─── TIPOGRAFÍAS ─────────────────────────────────────────────────────
   *
   * Display: Fraunces — serif óptico variable con personalidad editorial
   * Body: Inter Tight — sans-serif legible y moderno
   * Mono: JetBrains Mono — monoespaciado para datos y etiquetas técnicas
   *
   * NUNCA usar: Roboto, Open Sans, Lato, Poppins, Montserrat
   * ─────────────────────────────────────────────────────────────────── */

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;


  /* ─── ESCALA TIPOGRÁFICA ──────────────────────────────────────────────
   *
   * Tamaños fluidos con clamp() — escalan entre viewport pequeño y grande.
   * La escala sigue una progresión modular ajustada para uso editorial.
   * ─────────────────────────────────────────────────────────────────── */

  /* Display: títulos hero y grandes titulares */
  --fs-display: clamp(2.5rem, 6vw, 6rem);

  /* H2: títulos de sección */
  --fs-h2:      clamp(1.75rem, 4vw, 3rem);

  /* H3: subtítulos y encabezados de card */
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.75rem);

  /* Body: texto corrido principal */
  --fs-body:    1.0625rem;    /* 17px */

  /* Mono: etiquetas, datos técnicos, números */
  --fs-mono:    0.9375rem;    /* 15px */

  /* Small: notas al pie, metadatos, copyright */
  --fs-small:   0.8125rem;    /* 13px */


  /* ─── LINE-HEIGHTS ────────────────────────────────────────────────────
   *
   * Ajustados para cada escala: los titulares grandes necesitan
   * interlineado más compacto que el texto corrido.
   * ─────────────────────────────────────────────────────────────────── */

  --lh-display: 0.95;   /* muy compacto para titulares grandes */
  --lh-h2:      1.1;    /* ligeramente compacto para secciones */
  --lh-h3:      1.2;
  --lh-body:    1.55;   /* cómodo para lectura corrida */
  --lh-mono:    1.4;    /* monoespaciado, más abierto que display */


  /* ─── ESCALA DE ESPACIADO ─────────────────────────────────────────────
   *
   * Sistema de 8 puntos. Cada token es un múltiplo de 8px.
   * Usar SIEMPRE estos tokens, nunca valores ad-hoc.
   *
   * --s-1  →  8px   (margen mínimo, gaps pequeños)
   * --s-2  → 16px   (padding interno de componentes)
   * --s-3  → 24px   (espaciado entre elementos relacionados)
   * --s-4  → 32px   (padding lateral del contenedor en móvil)
   * --s-5  → 40px   (separación entre bloques dentro de sección)
   * --s-6  → 48px   (padding de secciones en móvil)
   * --s-7  → 56px   (secciones medianas)
   * --s-8  → 64px   (secciones estándar)
   * --s-9  → 72px   (secciones grandes)
   * --s-10 → 80px   (secciones hero/principales)
   * --s-11 → 88px   (espaciado máximo en móvil)
   * --s-12 → 96px   (espaciado máximo en desktop)
   * ─────────────────────────────────────────────────────────────────── */

  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-7:  56px;
  --s-8:  64px;
  --s-9:  72px;
  --s-10: 80px;
  --s-11: 88px;
  --s-12: 96px;


  /* ─── ELEVACIONES / SOMBRAS ───────────────────────────────────────────
   *
   * Sistema de sombras planas (estilo editorial, no material design).
   * Las sombras son desplazadas y sólidas, no difuminadas.
   * ─────────────────────────────────────────────────────────────────── */

  --shadow-sm:  2px 2px 0 0 var(--ink);
  --shadow-md:  4px 4px 0 0 var(--ink);
  --shadow-lg:  6px 6px 0 0 var(--ink);
  --shadow-sun: 4px 4px 0 0 rgba(232, 163, 23, 0.5);


  /* ─── TRANSICIONES ────────────────────────────────────────────────────
   *
   * Duraciones estándar para mantener coherencia en las animaciones.
   * ─────────────────────────────────────────────────────────────────── */

  --transition-fast:   150ms ease-out;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-reveal: 600ms ease;


  /* ─── BORDES ──────────────────────────────────────────────────────────
   *
   * Bordes estándar del sistema. Siempre rectos (sin border-radius),
   * salvo en elementos específicos como avatares.
   * ─────────────────────────────────────────────────────────────────── */

  --border:      1px solid var(--ink);
  --border-mist: 1px solid var(--mist);
  --border-bone: 1px solid var(--bone);


  /* ─── Z-INDEX ─────────────────────────────────────────────────────────
   *
   * Capas de apilamiento nombradas para evitar conflictos.
   * ─────────────────────────────────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 50;
  --z-nav:    100;
  --z-overlay: 200;
  --z-modal:  300;
  --z-toast:  400;
  --z-grain: 9999;   /* grain overlay siempre encima de todo */


  /* ─── CONTENEDORES ────────────────────────────────────────────────────
   *
   * Anchos máximos para los distintos tipos de contenedor.
   * ─────────────────────────────────────────────────────────────────── */

  --container-max:    1440px;
  --container-narrow:  900px;
  --container-wide:   1600px;

}