/*
  Central color system for all public pages.
  Page-specific stylesheets should use these tokens instead of redefining text colors.
*/
:root {
  color-scheme: dark;
  --bg: #191c22;
  --bg-deep: #101217;
  --surface-1: rgba(25, 28, 34, 0.92);
  --surface-2: rgba(39, 43, 52, 0.92);
  --surface-3: rgba(255, 255, 255, 0.05);
  --surface-4: rgba(255, 255, 255, 0.09);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.12);
  --gold: #ff4fb5;
  --gold-strong: #ff9a2f;
  --text: #f5efff;
  --muted: #b5a9cb;
  --air: #d15cff;
  --water: #ff4fb5;
  --fire: #ff9828;
  --earth: #ffbf5a;
  --air-soft: rgba(209, 92, 255, 0.14);
  --water-soft: rgba(255, 79, 181, 0.14);
  --fire-soft: rgba(255, 152, 40, 0.14);
  --earth-soft: rgba(255, 191, 90, 0.14);
}

html {
  color: var(--text);
  background: var(--bg-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--text);
}

:where(button, input, textarea, select) {
  color: inherit;
}

:where(body, body *) {
  -webkit-text-fill-color: currentColor;
}