/* ============================================================
   tokens.css — Variables de marca (el "kit" reutilizable)
   Sistema editorial claro/oscuro del Manual de marca de David G.
   Para rebrandear a un cliente: cambia SOLO este archivo.

   Modelo de color: los componentes usan tokens SEMÁNTICOS
   (--bg, --text, --accent…). Por defecto el tema es CLARO.
   Cualquier sección con la clase .band--dark reescribe esos
   tokens a su versión oscura, así los componentes de dentro
   heredan los colores correctos sin duplicar CSS.
   ============================================================ */

/* --- Tipografía auto-alojada: Geist Sans + Geist Mono (OFL, ver assets/fonts/) ---
   Si los .woff2 aún no están en assets/fonts/, el sistema cae al fallback
   (system-ui / ui-monospace) sin romper nada. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/geist-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/geist-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/geist-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---------- Paleta base del manual (valores crudos, no usar directo) ---------- */
  --c-dark: #050b12; /* fondo oscuro principal */
  --c-dark-2: #111827; /* superficie oscura secundaria */
  --c-dark-3: #1a2534; /* elevación oscura (hover) */
  --c-light-text: #f5f3ee; /* texto sobre oscuro */
  --c-light-bg: #f6f5f1; /* fondo claro neutro */
  --c-grey: #a7adb5; /* gris técnico */
  --c-accent: #c6a13a; /* mostaza (acento, plano — NUNCA degradado) */
  --c-blue: #3b82f6; /* azul técnico (datos/IA/enlaces, uso mínimo) */

  /* ---------- Tokens SEMÁNTICOS — tema CLARO por defecto ---------- */
  --bg: var(--c-light-bg);
  --bg-elev: #fbfaf7; /* tarjetas (crema apenas más clara, sin blanco puro) */
  --bg-elev-2: #efece4; /* hover / superficie cálida */
  --bg-header: rgba(246, 245, 241, 0.82);

  --text: var(--c-dark); /* tinta */
  --text-muted: #454b53; /* AA sobre claro (~8:1) */
  --text-dim: #656b73; /* AA sobre claro (~5:1) */

  --border: rgba(5, 11, 18, 0.12);
  --border-strong: rgba(5, 11, 18, 0.22);

  /* Acento: fill/línea/punto = mostaza pura; texto = mostaza oscura legible en claro */
  --accent: var(--c-accent);
  --accent-strong: #d4af47; /* hover de fill */
  --accent-text: #7c6218; /* mostaza oscura, AA como texto sobre claro (~5.3:1) */
  --accent-ink: var(--c-dark); /* texto sobre botón/superficie mostaza */
  --accent-soft: rgba(198, 161, 58, 0.16);

  /* Azul técnico: enlaces y datos. Versión legible por tema. */
  --link: #1d4ed8; /* AA sobre claro */

  --focus-ring: rgba(198, 161, 58, 0.6);

  /* Textura de puntos (solo se pinta dentro de .band--dark) */
  --grid-dot: rgba(245, 243, 238, 0.05);

  /* Sombra suave para tarjetas sobre fondo claro */
  --shadow-card: 0 1px 2px rgba(5, 11, 18, 0.04), 0 14px 34px rgba(5, 11, 18, 0.07);

  /* ---------- Tipografía ---------- */
  --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  --font-display: var(--font-sans); /* Geist en negrita para display/titulares */
  --font-serif: Georgia, "Times New Roman", Times, serif;

  /* Escala fluida */
  --fs-eyebrow: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 0.95rem + 0.9vw, 1.375rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 4.2vw, 4rem);

  /* --- Layout --- */
  --container: 1120px;
  --measure: 65ch;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.6s;
}

/* ============================================================
   Banda OSCURA — bloques de autoridad (hero, cintas, contacto…).
   Reescribe los tokens semánticos a su versión oscura: los
   componentes de dentro se recolorean solos.
   ============================================================ */
.band--dark {
  color-scheme: dark;

  --bg: var(--c-dark);
  --bg-elev: var(--c-dark-2);
  --bg-elev-2: var(--c-dark-3);
  --bg-header: var(--c-dark); /* header sólido: nada de gris turbio translúcido sobre las secciones claras */

  --text: var(--c-light-text);
  --text-muted: var(--c-grey);
  --text-dim: #7f858d;

  --border: rgba(245, 243, 238, 0.14);
  --border-strong: rgba(245, 243, 238, 0.26);

  /* En oscuro la mostaza pura ya es legible como texto */
  --accent-text: var(--c-accent);
  --accent-soft: rgba(198, 161, 58, 0.14);
  --accent-ink: var(--c-dark);

  --link: #6ba4ff; /* azul técnico legible sobre oscuro */

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.35);
}