/* ══════════════════════════════════════════
   variables.css — Tokens de diseño globales
   ══════════════════════════════════════════ */

:root {
  /* Tema oscuro nativo para pickers (date, month, color, etc.) */
  color-scheme: dark;

  /* Colores principales */
  --primary:          #8b5cf6;
  --primary-rgb:      139, 92, 246;
  --primary-hover:    #7c3aed;
  --primary-dim:      rgba(139, 92, 246, 0.15);

  --accent:           #ec4899;
  --accent-rgb:       236, 72, 153;
  --accent-dim:       rgba(236, 72, 153, 0.15);

  --success:          #22c55e;
  --success-rgb:      34, 197, 94;
  --success-dark:     #10b981;
  --success-dim:      rgba(34, 197, 94, 0.12);

  --warning:          #f59e0b;
  --warning-rgb:      245, 158, 11;
  --warning-dim:      rgba(245, 158, 11, 0.12);

  --danger:           #ef4444;
  --danger-rgb:       239, 68, 68;
  --danger-dim:       rgba(239, 68, 68, 0.12);

  /* Texto */
  --text:             #fafafa;
  --text-muted:       #a1a1aa;
  --text-dim:         #a0a0a0;
  --text-light:       #d4d4d8;
  --text-faint:       #71717a;

  /* Superficies */
  --surface:          rgba(255, 255, 255, 0.03);
  --surface-hover:    rgba(255, 255, 255, 0.05);
  --surface-card:     rgba(255, 255, 255, 0.04);
  --surface-input:    rgba(255, 255, 255, 0.06);

  /* Bordes */
  --border:           rgba(255, 255, 255, 0.1);
  --border-hover:     rgba(255, 255, 255, 0.2);
  --border-focus:     rgba(139, 92, 246, 0.6);

  /* Fondo global */
  --bg:               #0a0a0f;
  --bg-secondary:     #0f0f1a;

  /* Layout */
  --radius-card:      16px;
  --radius-sm:        8px;
  --radius-xs:        6px;
  --max-width:        1400px;
  --layout-max:       1400px;
  --layout-reading:   1100px;
  --layout-gutter:    2rem;

  /* Sidebar */
  --sidebar-width:    240px;
  --topbar-height:    64px;

  /* Tipografía */
  --font-body:        'DM Sans', system-ui, sans-serif;
  --font-mono:        'DM Mono', 'Fira Code', monospace;

  /* Sombras */
  --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-modal:     0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-primary:   0 8px 24px rgba(139, 92, 246, 0.25);

  /* Transiciones */
  --transition:       0.2s ease;
  --transition-slow:  0.35s ease;
}