/* =====================================================================
   TOKENS DE DISEÑO
   Concepto: tonos tranquilos y minimalistas — fondo marfil piedra,
   tinta antracita, el marrón nogal del logotipo como único acento
   y anotaciones tipo cota de plano.
   Los colores principales se pueden cambiar desde config/site.config.js.
   ===================================================================== */
:root {
  /* Color */
  --bg: #F6F4EF;            /* marfil piedra */
  --bg-alt: #EEEAE3;        /* piedra cálida para bandas */
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;
  --ink: #221D1A;           /* negro cálido para titulares */
  --text: #3A3532;          /* antracita para textos */
  --muted: #736C66;
  --line: #E1DBD2;
  --line-strong: #C9BFB2;
  --accent: #8A5A3B;        /* marrón nogal del logotipo */
  --accent-strong: #6E4529;
  --accent-soft: #F0E6DC;
  --accent-light: #D9B896;  /* acento sobre fondos oscuros */
  --accent-glow: rgba(138, 90, 59, .28);
  --on-dark: #F6F1EA;
  --on-dark-muted: #B8ADA2;
  --dark: #1E1915;          /* espresso */
  --dark-2: #2A231E;
  --success: #4E7A55;
  --error: #B3261E;
  --whatsapp: #1FA855;

  /* Logotipo */
  --logo-main: var(--accent);
  --logo-text: #2E2420;
  --logo-tag: #5C4A3E;

  /* Tipografía */
  --font-display: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Escala tipográfica (fluida) */
  --fs-xs: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-lg: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-xl: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  --fs-hero: clamp(2.4rem, 1.5rem + 4.4vw, 5rem);

  /* Espaciado y layout */
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1240px;
  --section-y: clamp(72px, 9vw, 136px);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --header-h: 88px;
  --header-h-small: 68px;

  /* Sombras y movimiento */
  --shadow-sm: 0 1px 2px rgba(34, 29, 26, .06), 0 2px 8px rgba(34, 29, 26, .05);
  --shadow: 0 10px 30px -12px rgba(34, 29, 26, .22);
  --shadow-lg: 0 30px 60px -25px rgba(34, 29, 26, .4);
  --glow: 0 0 0 1px rgba(138, 90, 59, .25), 0 10px 26px -12px rgba(138, 90, 59, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .2s;
  --t: .45s;
  --t-slow: .9s;

  color-scheme: light;
}