/* ==========================================================================
   Criterio & Dominio — tokens semánticos
   Capa común para componentes nuevos. No sustituye brand.css: lo referencia.
   ========================================================================== */

:root {
  /* Color semántico */
  --color-primary: var(--azul-noche);
  --color-primary-hover: var(--azul-noche-90);
  --color-secondary: var(--verde-oliva);
  --color-secondary-hover: var(--verde-oliva-90);
  --color-bg: var(--marfil);
  --color-surface: #ffffff;
  --color-surface-soft: var(--marfil-soft);
  --color-text: var(--pizarra);
  --color-heading: var(--azul-noche);
  --color-muted: var(--piedra);
  --color-border: var(--piedra);
  --color-success: #4f6b3a;
  --color-warning: #8a5a1f;
  --color-danger: #8b2e22;
  --color-focus: var(--verde-oliva);

  /* Tipografía */
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);

  /* Espaciado: escala de 4 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Forma */
  --radius-sm: 0.25rem;
  --radius-md: 0.3rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 36, 51, 0.08);
  --shadow-md: 0 8px 30px rgba(27, 36, 51, 0.08);
}