/**
 * Tokens del design system — valores por defecto de fábrica.
 * fix (CMS genérico): los valores reales (tipografías, colores) se
 * sobreescriben en tiempo de ejecución según los ajustes del sitio
 * (ver /admin/ajustes.php y src/lib/theme.php) — esto es solo el fallback.
 * Paleta B/N + grises, AAA de contraste.
 */
:root {
  /* Color */
  --color-ink-900: #0A0A0A;
  --color-ink-700: #2B2B2B;
  --color-ink-500: #565656; /* fix: ajustado de #595959 a #565656 (accessibility-agent, margen AAA real) */
  --color-ink-300: #9E9E9E;
  --color-ink-100: #E0E0E0;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F5F5;
  --color-surface-inverse: #0A0A0A;
  --color-focus: #0A0A0A;
  --color-error: #7F0000;
  --color-success: #1B5E20;
  --color-overlay-hero: rgba(10, 10, 10, 0.72); /* fix: subido de 0.55 a 0.72 (accessibility-agent) */

  /* Spacing (base 4px) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Lora', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* nav/UI: sans-serif, adenda de Andrea */

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  --font-size-2xl: 40px;
  --font-size-hero: clamp(40px, 8vw, 96px);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Shape / elevation */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.12);
  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.16);

  /* Layering */
  --z-nav: 50;
  --z-drawer: 150;
  --z-modal: 200;
  --z-toast: 300;

  /* Breakpoints (referencia — usados en media queries directamente, CSS no soporta var() en @media) */
  --bp-tablet: 768px;
  --bp-desktop: 1200px;
  --bp-desktop-lg: 1600px;
}