/* ============================================
   MDI Generator — Design Tokens
   Shared between all pages
   ============================================ */

/* ─── Default Theme (Arcane Blue) ─────────── */
:root {
  --bg: #0a0e13;
  --bg-darker: #060810;
  --panel: #141b26;
  --muted: #8b92a8;
  --text: #e8eaf0;
  --accent: #5b9cf6;
  --danger: #f43f5e;
  --success: #10b981;
  --warning: #f59e0b;
  --border: #252e3f;
  --gradient-primary: linear-gradient(135deg, #5b9cf6, #10b981);
  --gradient-bg: linear-gradient(135deg, #0a0e13, #0d1219 50%, #111827);
  --card-hover-glow: rgba(91, 156, 246, .15);
  --accent-glow: rgba(91, 156, 246, .2);
  --accent-soft: rgba(91, 156, 246, .1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 4px 12px rgba(0,0,0,.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.4);
}

/* ─── Midnight Theme (Void Purple & Gold) ─── */
[data-theme="midnight"] {
  --bg: #0d0a14;
  --bg-darker: #080510;
  --panel: #1a1228;
  --muted: #b8a9d4;
  --text: #f3eee2;
  --accent: #7c3aed;
  --danger: #ef4444;
  --success: #f7b90a;
  --warning: #f7b90a;
  --border: #2d2244;
  --gradient-primary: linear-gradient(135deg, #7c3aed, #f7b90a);
  --gradient-bg: radial-gradient(ellipse at 50% 0%, #1a1030 0%, #0d0a14 50%, #080510 100%);
  --card-hover-glow: rgba(124, 58, 237, .2);
  --accent-glow: rgba(124, 58, 237, .25);
  --accent-soft: rgba(124, 58, 237, .12);
  --gold: #f7b90a;
  --gold-light: #fcd34d;
  --void-purple: #6d28d9;
  --void-deep: #4c1d95;
}

/* ─── Reset & Base ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

body {
  background: var(--gradient-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

.muted { color: var(--muted); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}