/*
 * DondeVeo — Design Tokens
 * Única fuente de verdad para colores, tipografía, radios y espaciado.
 * Los aliases legacy permiten que el CSS inline existente siga funcionando
 * mientras se migra cada build script (Fase 0 → Fase 1).
 */
:root {
  /* Backgrounds */
  --bg:        #0a0a0c;
  --surface:   #131318;
  --surface-2: #1c1c24;

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* Text */
  --text:       #f5f5f7;
  --text-muted: #a1a1aa;
  --text-dim:   #71717a;

  /* Brand */
  --accent:      #f43f5e;
  --accent-glow: rgba(244,63,94,0.15);
  --gold:        #fbbf24;
  --gold-glow:   rgba(251,191,36,0.12);
  --emerald:     #4ade80;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Typography */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Spacing */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;    --s-6: 1.5rem;  --s-8: 2rem;  --s-12: 3rem;

  /* Legacy aliases — mantienen compatibilidad con CSS inline existente */
  --bg2:    var(--surface);
  --card:   var(--surface-2);
  --card2:  var(--surface-2);
  --border2: var(--border-strong);
  --tm:     var(--text-muted);
  --td:     var(--text-dim);
  --red:    var(--accent);
  --red2:   var(--accent-glow);
  --green:  var(--emerald);
  --gd:     var(--gold-glow);
  --r:      var(--r-lg);
  --rl:     var(--r-xl);
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
}