/* Sabora · tokens de marca (A3 · Sello lima) — 03-11-2026
   Fuentes: Satoshi y General Sans (Fontshare, licencia en fonts/licencias/). */

@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/GeneralSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Paleta */
  --sab-verde-noche: #0B2B22;   /* color principal: textos, fondos oscuros, sello */
  --sab-lima: #C4EE4A;          /* acento: botones, vapor, resaltados sobre oscuro */
  --sab-lima-profundo: #9BC92A; /* acento solo sobre fondos claros (vapor del logo) */
  --sab-hueso: #F4F3EA;         /* fondo claro principal */
  --sab-musgo: #3F5E4B;         /* textos secundarios, bordes, gráficos */
  --sab-blanco: #FFFFFF;
  --sab-error: #B3261E;         /* faltantes, diferencias de caja */

  /* Roles */
  --sab-fondo: var(--sab-hueso);
  --sab-texto: var(--sab-verde-noche);
  --sab-texto-suave: var(--sab-musgo);
  --sab-acento: var(--sab-lima);
  --sab-boton-fondo: var(--sab-verde-noche);
  --sab-boton-texto: var(--sab-lima);
  --sab-borde: color-mix(in srgb, var(--sab-musgo) 25%, transparent);

  /* Tipografía */
  --sab-fuente-titulos: "Satoshi", system-ui, sans-serif;   /* 900 Black para títulos, 700 para subtítulos */
  --sab-fuente-texto: "General Sans", system-ui, sans-serif;

  /* Escala (público adulto: textos grandes) */
  --sab-h1: clamp(2.4rem, 5vw, 3.5rem);
  --sab-h2: clamp(1.9rem, 3.6vw, 2.5rem);
  --sab-h3: 1.5rem;
  --sab-cuerpo: 1.125rem;      /* nunca menos de 1.1rem */
  --sab-etiqueta: 0.95rem;     /* nunca menos de 0.9rem */
  --sab-interlineado: 1.55;

  /* Forma */
  --sab-radio: 14px;
  --sab-radio-boton: 999px;
  --sab-espacio: 8px;          /* múltiplos: 8, 16, 24, 32, 48, 64 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sab-fondo: var(--sab-verde-noche);
    --sab-texto: var(--sab-hueso);
    --sab-texto-suave: #B9C7BE;
    --sab-boton-fondo: var(--sab-lima);
    --sab-boton-texto: var(--sab-verde-noche);
  }
}
:root[data-theme="dark"] {
  --sab-fondo: var(--sab-verde-noche);
  --sab-texto: var(--sab-hueso);
  --sab-texto-suave: #B9C7BE;
  --sab-boton-fondo: var(--sab-lima);
  --sab-boton-texto: var(--sab-verde-noche);
}

/* Base opcional */
body { background: var(--sab-fondo); color: var(--sab-texto); font-family: var(--sab-fuente-texto); font-size: var(--sab-cuerpo); line-height: var(--sab-interlineado); }
h1, h2, h3 { font-family: var(--sab-fuente-titulos); line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: var(--sab-h1); font-weight: 900; }
h2 { font-size: var(--sab-h2); font-weight: 900; }
h3 { font-size: var(--sab-h3); font-weight: 700; }
.sab-boton { display: inline-block; background: var(--sab-boton-fondo); color: var(--sab-boton-texto); font-family: var(--sab-fuente-titulos); font-weight: 700; font-size: 1.125rem; padding: 0.85em 1.6em; border-radius: var(--sab-radio-boton); text-decoration: none; }
.sab-etiqueta { font-size: var(--sab-etiqueta); color: var(--sab-texto-suave); }