/*
  DreamEvent Design System — Variables
  =====================================
  Tokens canónicos del proyecto. Los colores se mapean a la paleta
  de tema existente (--de-*) definida en /css/dreamevent-theme.css,
  por lo que el modo claro/oscuro sigue funcionando automáticamente.

  Regla: ninguna página debe definir colores, radios, sombras o
  espaciados manualmente. Usar estas variables.
*/

:root {
  /* ─── Color (mapeado al tema activo) ─────────────────────────── */
  --color-primary: var(--de-primary, #8b5cf6);
  --color-primary-hover: var(--de-primary-hover, #7c3aed);
  --color-primary-soft: var(--de-primary-soft, #ede9fe);
  --color-secondary: var(--de-blue, #60a5fa);
  --color-background: var(--de-bg, #f8f7ff);
  --color-surface: var(--de-surface, #ffffff);
  --color-surface-2: var(--de-surface-2, #f0eeff);
  --color-text: var(--de-text, #17172a);
  --color-muted: var(--de-text-muted, #5f6075);
  --color-border: var(--de-border, #e7e4f5);
  --color-border-strong: var(--de-border-strong, #c4bbf0);

  /* ─── Radios ─────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ─── Sombras ────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(23, 23, 42, 0.06);
  --shadow-md: var(--de-card-shadow, 0 4px 20px rgba(139, 92, 246, 0.08));
  --shadow-lg: var(--de-shadow-hover, 0 14px 32px rgba(139, 92, 246, 0.18));

  /* ─── Espaciado ──────────────────────────────────────────────── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;

  /* ─── Contenedores ───────────────────────────────────────────── */
  --container-width: 1140px;
  --container-sm-width: 760px;
  --container-lg-width: 1320px;

  /* ─── Tipografía ─────────────────────────────────────────────── */
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', 'Manrope', system-ui, sans-serif;
}