:root {
  /* Core palette */
  --color-bg: #060608;
  --color-surface: #111217;
  --color-panel: #1a1b23;
  --color-border: #262732;
  --color-muted: #6f7080;
  --color-subtle: #9d9ead;
  --color-text: #f5f5f7;
  --color-primary: #e9e9e9;
  --color-primary-soft: #ff6475;
  --color-accent: #f25c54;
  --color-field-purple: #c29bff;
  --color-field-pink: #ff7fcf;
  --color-field-blue: #7fd3ff;
  --element-sodium: #5698a8;
  --element-magnesium: #ff7fcf;
  --element-iron: #ff6b6b;
  --element-copper: #ff9551;
  --element-gold: #bb9335;

  /* Utilities */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.bg-surface {
  background-color: var(--color-surface);
}

.bg-panel {
  background-color: var(--color-panel);
}

.text-muted {
  color: var(--color-muted);
}

.text-subtle {
  color: var(--color-subtle);
}