:root {
  /* Dark palette (default) — extends hubspot-workflows machine-layout tokens */
  --surface-base: #0f1117;
  --surface-raised: #1a1d27;
  --surface-overlay: #232634;
  --border-subtle: #2a2d3a;
  --border-strong: #3a3f52;
  --text-primary: #e1e4ed;
  --text-secondary: #b8bcc9;
  --text-muted: #8b8fa3;
  --accent: #818cf8;
  --accent-hover: #a5afff;
  --accent-muted: #4c5480;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;
  --code-bg: #1a1d27;
  --code-border: #2a2d3a;

  /* Typography */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Monaco, Consolas, "Courier New", monospace;
  --font-size-base: 16px;
  --line-height-body: 1.6;
  --line-height-tight: 1.3;

  /* Spacing (4px base unit) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --sidebar-width: 260px;
  --content-max-width: 980px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: light) {
  :root {
    --surface-base: #ffffff;
    --surface-raised: #f7f8fa;
    --surface-overlay: #eef0f4;
    --border-subtle: #e2e5ec;
    --border-strong: #c8cdd8;
    --text-primary: #1a1d27;
    --text-secondary: #3d4050;
    --text-muted: #6b7085;
    --accent: #5159e6;
    --accent-hover: #3c44c9;
    --accent-muted: #c7caf0;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;
    --code-bg: #f3f4f8;
    --code-border: #e2e5ec;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
}

:root[data-theme="dark"] {
  --surface-base: #0f1117;
  --surface-raised: #1a1d27;
  --surface-overlay: #232634;
  --border-subtle: #2a2d3a;
  --border-strong: #3a3f52;
  --text-primary: #e1e4ed;
  --text-secondary: #b8bcc9;
  --text-muted: #8b8fa3;
  --accent: #818cf8;
  --accent-hover: #a5afff;
  --accent-muted: #4c5480;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;
  --code-bg: #1a1d27;
  --code-border: #2a2d3a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  --surface-base: #ffffff;
  --surface-raised: #f7f8fa;
  --surface-overlay: #eef0f4;
  --border-subtle: #e2e5ec;
  --border-strong: #c8cdd8;
  --text-primary: #1a1d27;
  --text-secondary: #3d4050;
  --text-muted: #6b7085;
  --accent: #5159e6;
  --accent-hover: #3c44c9;
  --accent-muted: #c7caf0;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  --code-bg: #f3f4f8;
  --code-border: #e2e5ec;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
}