/* ============================================================
   VARIABLES.CSS — Design tokens & custom properties
   ============================================================ */
:root {
  /* Brand colors */
  --primary:        #7e22ce;
  --primary-dark:   #6b21a8;
  --primary-light:  #a855f7;

  /* Semantic colors */
  --success:  #10b981;
  --warning:  #f59e0b;
  --danger:   #ef4444;
  --info:     #3b82f6;
  --dark:     #1e293b;
  --light:    #f8fafc;
  --muted:    #64748b;

  /* Border radius */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;

  /* Shadows */
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.3);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.1);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.07);

  /* Transitions */
  --transition: all 0.3s ease;

  /* Typography */
  --font-body: 'DM Sans', sans-serif;
  --font-display: 'DM Serif Display', serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Z-index layers */
  --z-base:    1;
  --z-nav:     100;
  --z-notif:   500;
  --z-modal:   1000;
  --z-overlay: 9999;
  --z-auth:    99999;
}

/* Dark mode tokens */
[data-theme="dark"] {
  --light:    #1e2433;
  --dark:     #f1f5f9;
  --muted:    #94a3b8;
  --bg-body:  linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#312e81 100%);
  --bg-panel: #1e2433;
  --bg-card:  #252d3d;
  --border:   #334155;
  --text:     #e2e8f0;
}