:root,
[data-theme="dark"] {
  --bg-primary: #0B0B0C;
  --bg-secondary: #111113;
  --bg-elevated: #18181B;
  --border-subtle: rgba(255,255,255,0.08);
  --text-primary: #E4E4E7;
  --text-secondary: #A1A1AA;
  --accent: #FF6A00;
  --accent-hover: #FF7A1A;
  --accent-glow: rgba(255,106,0,0.25);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.2), 0 10px 30px rgba(0,0,0,0.25);
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.2), 0 12px 36px rgba(0,0,0,0.35);
  --shadow-btn: 0 10px 30px var(--accent-glow);

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Additional tokens for syntax highlighting */
  --hl-heading: #FF6A00;
  --hl-step: #22C55E;
  --hl-code: #8BE9FD;
}

[data-theme="light"] {
  --bg-primary: #FAFAFA;
  --bg-secondary: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --border-subtle: rgba(0,0,0,0.08);
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --accent: #FF6A00;
  --accent-hover: #E65C00;
  --accent-glow: rgba(255,106,0,0.15);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.08);
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.05), 0 12px 36px rgba(0,0,0,0.12);
  --shadow-btn: 0 10px 30px var(--accent-glow);

  --hl-heading: #E65C00;
  --hl-step: #16A34A;
  --hl-code: #0284C7;
}