/*
 * Tokens de diseño (Mediterranean Field System) como CSS custom properties.
 * Fuente: docs/DESIGN.md. La fuente de verdad para Tailwind es frontend/tailwind.config.js;
 * este fichero existe para consumidores que NO pasan por Tailwind (p. ej. popups de Leaflet,
 * estilos inyectados). Mantener ambos en sincronía con DESIGN.md.
 */
:root {
  /* Superficies y texto */
  --color-background: #f1fbff;
  --color-background-warm: #fbfaf8;
  --color-surface: #f1fbff;
  --color-surface-container: #e0f1f7;
  --color-surface-container-low: #e6f6fd;
  --color-surface-container-high: #daebf1;
  --color-on-surface: #0e1e22;
  --color-on-surface-variant: #3e494a;
  --color-outline: #6e797a;
  --color-outline-variant: #bdc9ca;

  /* Marca */
  --color-primary: #00626a;            /* teal mediterráneo */
  --color-on-primary: #ffffff;
  --color-primary-container: #0e7c86;
  --color-sea-dark: #0a5a62;

  /* Acción (coral) */
  --color-tertiary: #a0320a;
  --color-tertiary-container: #c14a22;
  --color-on-tertiary: #ffffff;

  /* Neutro / secundario */
  --color-secondary: #615e56;
  --color-secondary-container: #e7e2d8;

  /* Semánticos (siempre con icono/etiqueta, no solo color) */
  --color-success: #2e9e6b;
  --color-warning: #e0a11e;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;

  /* Tipografía */
  --font-headline: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Ritmo y objetivos táctiles */
  --space-base: 8px;
  --space-gutter: 16px;
  --touch-target-min: 48px;
  --radius-card: 0.5rem;
  --radius-button: 1rem;
}