:root {
  --bg: #021f20;
  --accent: #00ffb3;
  --surface: rgba(255,255,255,0.10);
  --surface-alt: color-mix(in srgb, var(--accent) 12%, transparent);
  --border: rgba(255,255,255,0.1);
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.5);
  --text-dim: rgba(255,255,255,0.25);
}

html.light {
  --bg: #f0faf8;
  --accent: #047857;
  --surface: rgba(255,255,255,0.8);
  --surface-alt: color-mix(in srgb, var(--accent) 12%, transparent);
  --border: rgba(15,36,32,0.1);
  --text: #0f2420;
  --text-muted: rgba(15,36,32,0.6);
  --text-dim: rgba(15,36,32,0.4);
}

:root {
  --btn-primary-bg: #00ffb3;
  --btn-primary-text: #021f20;
  --btn-primary-border: transparent;
  --btn-primary-size: 14px;
  --btn-secondary-bg: rgba(5,64,65,0.4);
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: rgba(255,255,255,0.1);
  --btn-secondary-size: 14px;
  --btn-danger-bg: rgba(239,68,68,0.08);
  --btn-danger-text: #ef4444;
  --btn-danger-border: rgba(239,68,68,0.3);
  --btn-danger-size: 14px;
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #00ffb3;
  --btn-ghost-border: transparent;
  --btn-ghost-size: 14px;
  --btn-icon-bg: rgba(255,255,255,0.05);
  --btn-icon-text: #ffffff;
  --btn-icon-border: rgba(255,255,255,0.1);
  --btn-icon-size: 14px;
}

html.light {
  --btn-primary-bg: #047857;
  --btn-primary-text: #f0faf8;
  --btn-primary-border: transparent;
  --btn-primary-size: 14px;
  --btn-secondary-bg: rgba(255,255,255,0.8);
  --btn-secondary-text: #0f2420;
  --btn-secondary-border: rgba(15,36,32,0.1);
  --btn-secondary-size: 14px;
  --btn-danger-bg: rgba(239,68,68,0.06);
  --btn-danger-text: #dc2626;
  --btn-danger-border: rgba(220,38,38,0.3);
  --btn-danger-size: 14px;
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #047857;
  --btn-ghost-border: transparent;
  --btn-ghost-size: 14px;
  --btn-icon-bg: rgba(255,255,255,0.6);
  --btn-icon-text: #0f2420;
  --btn-icon-border: rgba(15,36,32,0.1);
  --btn-icon-size: 14px;
}