/* ═══════════════════════════════════════════════════════════════════════════
   ComeCerca — Design tokens

   Única fuente de verdad visual. Ningún valor de color, espaciado, radio,
   sombra o duración debería aparecer literal en el resto de los archivos CSS.

   La identidad es mediterránea: crema cálida de fondo, azul profundo de mar
   como color principal, terracota gastronómica como acento y un verde fresco
   reservado en exclusiva para los estados de verificación.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color: base ──────────────────────────────────────────────────────── */
  --color-bg: #FBF7F1;            /* crema cálida */
  --color-bg-sunk: #F4EDE3;       /* secciones hundidas */
  --color-surface: #FFFFFF;
  --color-surface-warm: #FDFAF6;
  --color-overlay: rgba(20, 16, 14, 0.55);

  /* ── Color: marca ─────────────────────────────────────────────────────── */
  --color-primary: #0E4C5C;       /* azul mediterráneo profundo */
  --color-primary-strong: #093642;
  --color-primary-soft: #E4EEF0;
  --color-primary-tint: #F1F7F8;

  --color-secondary: #E2603F;     /* coral / terracota gastronómica */
  --color-secondary-strong: #C24A2C;
  --color-secondary-soft: #FCEBE5;

  --color-accent: #1F9D64;        /* verde de verificación */
  --color-accent-strong: #17784C;
  --color-accent-soft: #E4F4EC;

  /* ── Color: texto ─────────────────────────────────────────────────────── */
  --color-ink: #14100E;           /* casi negro, cálido */
  --color-ink-soft: #4A423C;
  --color-ink-muted: #7A716A;
  --color-ink-inverse: #FDFAF6;

  /* ── Color: líneas ────────────────────────────────────────────────────── */
  --color-border: #E8DFD3;
  --color-border-strong: #D6C9B8;
  --color-border-subtle: #F0E9DF;

  /* ── Color: estados de verificación ───────────────────────────────────── */
  --state-verified: #1F9D64;
  --state-verified-bg: #E4F4EC;
  --state-pending: #D9A521;
  --state-pending-bg: #FBF2DC;
  --state-review: #E2833F;
  --state-review-bg: #FCEEE0;
  --state-outdated: #D14343;
  --state-outdated-bg: #FBE7E7;

  /* ── Color: feedback ──────────────────────────────────────────────────── */
  --color-success: #1F9D64;
  --color-warning: #D9A521;
  --color-danger: #D14343;
  --color-info: #0E4C5C;

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;

  /* Escala fluida: el tamaño crece con el viewport sin saltos bruscos. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --text-xl: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.6vw + 1.15rem, 2rem);
  --text-3xl: clamp(1.875rem, 2.8vw + 1.2rem, 2.75rem);
  --text-4xl: clamp(2.25rem, 5vw + 1rem, 4rem);
  --text-hero: clamp(2.75rem, 9vw + 0.5rem, 6.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.08em;

  /* ── Espaciado (escala de 4 px) ───────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-gap: clamp(3rem, 7vw, 6.5rem);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-height: 68px;

  /* ── Radios ───────────────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ── Sombras: muy sutiles, nunca dramáticas ───────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(20, 16, 14, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 16, 14, 0.05), 0 1px 2px rgba(20, 16, 14, 0.03);
  --shadow-md: 0 4px 16px rgba(20, 16, 14, 0.06), 0 1px 3px rgba(20, 16, 14, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 16, 14, 0.08), 0 2px 8px rgba(20, 16, 14, 0.04);
  --shadow-xl: 0 24px 60px rgba(20, 16, 14, 0.12), 0 4px 12px rgba(20, 16, 14, 0.05);
  --shadow-focus: 0 0 0 3px rgba(14, 76, 92, 0.22);

  /* ── Movimiento: rápido y con propósito ───────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 340ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── Capas ────────────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* Respeta la preferencia del sistema: la animación es un adorno, no un requisito. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}