/* =========================================================
   Proyecto Raíces — FOUNDATION · Tokens
   ---------------------------------------------------------
   Única fuente de valores de diseño del sitio, en tres capas:
     1. PRIMITIVOS  — valores crudos: paleta (y sus canales RGB),
        neutros de soporte, tipografía, espaciado, radios, sombras,
        movimiento. Describen QUÉ valores existen.
     2. SEMÁNTICOS  — fondos, textos, bordes, acentos, estados y
        foco. Describen PARA QUÉ se usa cada valor; es la capa que
        consumen components/patterns/pages.
     3. COMPONENTES — tokens propios de un componente compartido
        (hoy: padding de botones).

   Orden de carga de las hojas (ver <head> de cada página):
     foundation/tokens → foundation/base → components → patterns
     → pages/<página>. Cada capa sólo depende de las anteriores.

   Los valores son exactamente los vigentes en el sitio: esta capa
   ordena el sistema, no cambia la dirección visual. Donde un valor
   de los componentes queda fuera de la escala (tamaños de texto
   intermedios como 10.5/11.5/12.5/13.5/14.5/17/19px, radios de 8px,
   formas orgánicas únicas) se dejó literal a propósito: normalizarlo
   cambia el aspecto y le corresponde a la próxima dirección visual.
   ========================================================= */
:root{
  /* ===== 1. PRIMITIVOS ===== */

  /* Paleta de marca — no editar por página. #013020 es el verde
     principal (base de la identidad); #43612F pasa a "verde
     complementario". Crema/tinta son Papel/Asfalto de la paleta. */
  --color-celeste:#8BA6B7; --color-marron:#8D4B12; --color-naranja:#FF5B28;
  --color-amarillo:#E9E073; --color-verde:#013020; --color-verde-complementario:#43612F; --color-verde-oliva:#6A7133;
  --color-crema:#ECE7D8; --color-tinta:#151310; --color-cemento:#8C887C;

  /* Neutros de soporte — grises/cremas cálidos que antes estaban
     sueltos en el CSS (texto sobre foto, footer, reseñas, fallback de
     imagen) y colores de terceros con identidad propia (WhatsApp). */
  --color-blanco:#fff;
  --color-crema-claro:#f1eee3;   /* bajada de portada sobre foto */
  --color-arena:#e7e3d6;         /* texto secundario sobre foto */
  --color-piedra:#cfcabb;        /* texto y links del footer / cta-band */
  --color-piedra-oscura:#9b967f; /* bajada del footer */
  --color-tierra:#8a8470;        /* rol de una reseña · línea legal del footer */
  --color-cemento-oscuro:#5E5A4F; /* texto secundario sobre papel/amarillo */
  --color-tinta-suave:#3a3626;   /* texto de reseña sobre blanco */
  --color-verde-claro:#0e4a33; --color-verde-profundo:#06251a; /* fallback de imagen */
  --color-whatsapp:#25D366; --color-whatsapp-hover:#1DA851;

  /* Canales RGB: todo velo, borde o sombra translúcida deriva de acá
     (rgba(var(--x-rgb), alfa)) en vez de repetir números sueltos. */
  --verde-rgb:1,48,32; --verde-comp-rgb:67,97,47; --celeste-rgb:139,166,183;
  --amarillo-rgb:233,224,115; --naranja-rgb:255,91,40; --marron-rgb:141,75,18;
  --crema-rgb:236,231,216; --tinta-rgb:21,19,16; --cemento-rgb:140,136,124;
  --shadow-rgb:33,29,22;  /* tinte cálido de sombras */
  --scrim-rgb:20,18,12;   /* velos oscuros sobre fotografía */
  --black-rgb:0,0,0; --white-rgb:255,255,255;

  /* Tipografía — familias (Alte Haas Grotesk: títulos · Cascadia
     Mono: textos · Arial Rounded: detalles chicos) */
  --font-heading:'Alte Haas Grotesk','Arial Rounded MT Bold',sans-serif;
  --font-body:'Cascadia Mono',monospace;
  --font-detail:'Arial Rounded MT Bold',sans-serif;

  /* Tipografía — escala de texto. Los títulos de portada/sección
     conservan su clamp() puntual: son composición, no escala. */
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px;
  --text-lg:16px; --text-xl:18px; --text-2xl:20px; --text-3xl:22px; --text-4xl:24px;

  /* Tipografía — tracking */
  --tracking-tight:-0.01em;   /* títulos */
  --tracking-ui:0.02em;       /* botones, navegación */
  --tracking-label:0.08em;    /* etiquetas chicas en mayúscula */
  --tracking-wide:0.1em;      /* breadcrumb, tags */
  --tracking-eyebrow:0.15em;  /* kickers / eyebrows */

  /* Espaciado — múltiplos de 4px */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --section-y:100px; --section-y-mobile:64px;

  /* Layout */
  --content-max:1180px;
  --gutter:32px;
  --gutter-mobile:20px;

  /* Radios — geométricos */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px; --radius-round:50%;
  /* Radios — formas orgánicas (esquinas alternadas grande/chica), el
     recurso de marca para fotos. "-r" es la versión espejada. */
  --radius-organic-sm:16px 6px 16px 6px;
  --radius-organic-md:28px 10px 28px 10px;
  --radius-organic-lg:36px 12px 36px 12px; --radius-organic-lg-r:12px 36px 12px 36px;

  /* Sombras — con tinte cálido, nunca negro puro */
  --shadow-sm:0 10px 24px rgba(var(--shadow-rgb),0.16);
  --shadow-md:0 16px 32px rgba(var(--shadow-rgb),0.14);
  --shadow-lg:0 24px 48px rgba(var(--shadow-rgb),0.16);
  --shadow-xl:0 30px 60px rgba(var(--shadow-rgb),0.16);
  --shadow-header:0 8px 22px -18px rgba(var(--verde-rgb),0.6);

  /* Movimiento */
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-fast:0.2s;
  --duration-base:0.3s;
  --duration-slow:0.6s;

  /* Breakpoints (documental — @media no admite var(), así que los
     media queries siguen en px explícito; estos son la referencia):
     mobile 640 · destinos-mobile 700 · tablet 860 · desktop 960 */

  /* ===== 2. SEMÁNTICOS ===== */

  /* Fondos y superficies */
  --bg-primary:var(--color-verde);   /* base de la identidad */
  --bg-surface:var(--color-crema);   /* papel: paneles de lectura */
  --bg-dark:var(--color-tinta);      /* cta-band, footer */
  --canvas-base:var(--color-verde);  /* lienzo pintado sobre <main> en cada página */

  /* Textos (el texto por defecto es Papel sobre el verde base).
     Secundario/atenuado: piedra sobre el verde y la tinta (≥4.5:1 aun
     en las zonas más claras del lienzo pintado); sobre superficies
     claras (crema, blanco, amarillo) las páginas redefinen ambos con
     --text-secondary-on-paper, igual que el foco. Cemento (#8C887C)
     daba 2.3–4.1:1 y no llegaba a WCAG AA en ninguno de los dos. */
  --text-primary:var(--color-crema);
  --text-secondary:var(--color-piedra);
  --text-muted:var(--color-piedra);
  --text-secondary-on-paper:var(--color-cemento-oscuro);

  /* Bordes */
  --border-color:rgba(var(--cemento-rgb),0.28);
  --border-color-strong:rgba(var(--cemento-rgb),0.5);

  /* Acentos — jerarquía aprobada (CLAUDE.md §8): naranja = acento
     principal / CTA · amarillo = acento secundario / detalles. */
  --color-accent:var(--color-naranja);
  --color-accent-2:var(--color-amarillo);

  /* Estados */
  --state-ok-bg:#e3ecdb;  --state-ok-text:var(--color-verde);
  --state-err-bg:#fbe1d4; --state-err-text:var(--color-naranja);

  /* Foco visible (sólo teclado): amarillo sobre verde/tinta; marrón
     sobre los paneles claros (ver foundation/base.css). */
  --focus-ring:var(--color-amarillo);
  --focus-ring-on-paper:var(--color-marron);

  /* ===== 3. COMPONENTES ===== */
  --btn-pad-sm:9px 18px; --btn-pad-md:12px 26px; --btn-pad-lg:17px 36px;
}