:root {
  /* Colors */
  --bg: #ffffff;
  --surface-primary: rgba(0, 0, 0, 0.03);
  --surface-secondary: #f5f5f7;
  --surface-elevated: rgba(255, 255, 255, 0.95);
  --surface-input: #ffffff;
  --surface-code: #1d1d1f;
  --ink: #1d1d1f;
  --ink-secondary: #6e6e73;
  --ink-tertiary: #86868b;
  --ink-on-accent: #ffffff;
  --ink-on-code: #e0e0e0;
  --accent: #0066cc;
  --accent-hover: #0071e3;
  --accent-subtle: rgba(0, 102, 204, 0.08);
  --accent-glow: rgba(0, 102, 204, 0.25);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: #0071e3;
  --border-subtle: rgba(0, 0, 0, 0.04);
  --success: #34c759;
  --warning: #ff9f0a;
  --error: #ff3b30;
  --green: #34c759;
  --amber: #ff9f0a;
  --red: #ff3b30;
  
  /* Danger Button Tokens */
  --btn-danger-border: var(--error);
  --btn-danger-text: var(--error);
  --btn-danger-bg: transparent;
  --btn-danger-hover-bg: var(--error);
  --btn-danger-hover-text: #ffffff;
  --btn-danger-hover-border: var(--error);

  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-heavy: 0 24px 70px rgba(0,0,0,0.25);
  --overlay: rgba(0, 0, 0, 0.45);
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(in srgb, var(--ink-tertiary) 42%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--ink-secondary) 62%, transparent);
  --scrollbar-corner: transparent;

  /* Fonts */
  --font-display: "SF Pro Display", system-ui, -apple-system, Inter, sans-serif;
  --font-body: "SF Pro Text", system-ui, -apple-system, Inter, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Radius */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Effects */
  --backdrop-blur: blur(20px);
  --transition-fast: 0.18s;
  --btn-active-transform: scale(0.95);
}