:root {
  --ink-0:        #0a0a0a;
  --ink-1:        #111111;
  --ink-2:        #171717;
  --ink-3:        #1f1f1f;
  --ink-4:        #2a2a2a;
  --ink-5:        #3a3a3a;
  --mute-1:       #525252;
  --mute-2:       #737373;
  --mute-3:       #a3a3a3;
  --line:         #1f1f1f;
  --line-strong:  #2a2a2a;
  --white:        #fafafa;
  --white-dim:    #e5e5e5;

  --accent-red:    #dc2626;
  --accent-green:  #84cc16;
  --accent-yellow: #facc15;

  --accent:        var(--accent-yellow);
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 88%, white);

  --font-display:  'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --ease:      cubic-bezier(0.2, 0, 0, 1);
  --duration:  220ms;

  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

[data-accent="red"]    { --accent: var(--accent-red); }
[data-accent="green"]  { --accent: var(--accent-green); }
[data-accent="yellow"] { --accent: var(--accent-yellow); }