*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface2: #1C1C1C;
  --border: #2A2A2A;
  --text: #E8E8E8;
  --muted: #777;
  --accent: #F97316;
  --accent-glow: rgba(249, 115, 22, 0.15);
  --accent-hover: #FB923C;
  --accent-on: #000;
  --preview-bg: #111;
  --radius: 12px;
  --shadow-preview: 0 2px 12px rgba(0, 0, 0, 0.4);
  --error-bg: rgba(239, 68, 68, 0.1);
  --error-border: rgba(239, 68, 68, 0.3);
  --error-text: #F87171;
}

[data-theme="light"] {
  --bg: #e8e6e1;
  --surface: #ffffff;
  --surface2: #f2f0ec;
  --border: rgba(0, 0, 0, 0.1);
  --text: #1a1a1a;
  --muted: #666;
  --accent: #e87a3a;
  --accent-glow: rgba(232, 122, 58, 0.12);
  --accent-hover: #d06a2e;
  --accent-on: #fff;
  --preview-bg: #f5f4f0;
  --radius: 12px;
  --shadow-preview: 0 2px 12px rgba(0, 0, 0, 0.08);
  --error-bg: rgba(239, 68, 68, 0.08);
  --error-border: rgba(239, 68, 68, 0.25);
  --error-text: #dc2626;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Sora', sans-serif; font-weight: 600; line-height: 1.2; }