/* Theme tokens — Light (default), Dark, Colorful */

:root,
[data-theme="light"] {
  --bg: #f8f7f4;
  --bg2: #eeede8;
  --bg3: #e4e3dc;
  --surface: #ffffff;
  --surface2: #faf9f6;
  --border: rgba(0, 0, 0, 0.1);
  --border2: rgba(0, 0, 0, 0.18);
  --text: #1a1a18;
  --text2: #555550;
  --text3: #888880;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-bg: #eff6ff;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --success: #16a34a;
  --warning: #d97706;
  --radius: 8px;
  --radius-lg: 12px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --canvas-bg: #f5f4f0;
  --grid-minor: rgba(0, 0, 0, 0.06);
  --grid-major: rgba(0, 0, 0, 0.12);
  --grid-label: rgba(0, 0, 0, 0.25);
  --selection: #2563eb;
  --selection-glow: rgba(37, 99, 235, 0.3);
  --snap-guide: #f59e0b;
  --marquee: rgba(37, 99, 235, 0.12);
  --marquee-border: #2563eb;
}

[data-theme="dark"] {
  --bg: #141413;
  --bg2: #1e1e1c;
  --bg3: #282826;
  --surface: #1c1c1a;
  --surface2: #242422;
  --border: rgba(255, 255, 255, 0.1);
  --border2: rgba(255, 255, 255, 0.18);
  --text: #f0efea;
  --text2: #a8a89e;
  --text3: #6e6e66;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-bg: #1e3a5f;
  --danger: #ef4444;
  --danger-bg: #450a0a;
  --success: #22c55e;
  --warning: #fbbf24;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --canvas-bg: #1a1a18;
  --grid-minor: rgba(255, 255, 255, 0.05);
  --grid-major: rgba(255, 255, 255, 0.11);
  --grid-label: rgba(255, 255, 255, 0.2);
  --selection: #3b82f6;
  --selection-glow: rgba(59, 130, 246, 0.35);
  --snap-guide: #fbbf24;
  --marquee: rgba(59, 130, 246, 0.15);
  --marquee-border: #3b82f6;
}

[data-theme="colorful"] {
  --bg: #fef7f0;
  --bg2: #fdeee3;
  --bg3: #fce4d4;
  --surface: #fffbf7;
  --surface2: #fff5eb;
  --border: rgba(180, 83, 9, 0.15);
  --border2: rgba(180, 83, 9, 0.25);
  --text: #431407;
  --text2: #7c2d12;
  --text3: #a16207;
  --accent: #ea580c;
  --accent-hover: #c2410c;
  --accent-bg: #ffedd5;
  --danger: #be123c;
  --danger-bg: #ffe4e6;
  --success: #059669;
  --warning: #ca8a04;
  --shadow: 0 2px 12px rgba(234, 88, 12, 0.12);
  --canvas-bg: #fff8f0;
  --grid-minor: rgba(124, 45, 18, 0.16);
  --grid-major: rgba(124, 45, 18, 0.34);
  --grid-label: rgba(124, 45, 18, 0.5);
  --selection: #ea580c;
  --selection-glow: rgba(234, 88, 12, 0.35);
  --snap-guide: #0891b2;
  --marquee: rgba(234, 88, 12, 0.12);
  --marquee-border: #ea580c;
}