/**
 * Design Tokens & CSS Variables for Ptable Theme
 */

:root {
  /* States of Matter Colors */
  --solid-color: #111827;
  --liquid-color: #1d4ed8;
  --gas-color: #b91c1c;
  --unknown-color: #6b7280;

  /* Element Series Colors (Light Mode) */
  --series-nonmetal: #a7f3d0;
  --series-noble: #c7d2fe;
  --series-alkali: #fecaca;
  --series-alkaline: #fed7aa;
  --series-metalloid: #fef08a;
  --series-halogen: #e9d5ff;
  --series-transition: #bae6fd;
  --series-poor: #e2e8f0;
  --series-lanthanoid: #fbcfe8;
  --series-actinoid: #f5d0fe;
  --series-unknown: #e5e7eb;

  /* Theme Surfaces (Light) */
  --body-bg: #f3f6f8;
  --surface-card: #ffffff;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --hover-highlight: #eff6ff;
  --active-tab-color: #0284c7;

  /* Gradients */
  --heat-gradient: linear-gradient(to right, #38bdf8, #cbd5e1, #facc15, #f97316, #ef4444);

  /* Element Cell Metrics */
  --cell-radius: 4px;
  --cell-padding: 3px;
  --cell-gap: 3px;
}

/* Dark Theme Overrides */
body.dark-mode {
  --solid-color: #f8fafc;
  --liquid-color: #60a5fa;
  --gas-color: #f87171;
  --unknown-color: #94a3b8;

  /* Element Series Colors (Dark Mode muted vibrant) */
  --series-nonmetal: #065f46;
  --series-noble: #3730a3;
  --series-alkali: #991b1b;
  --series-alkaline: #9a3412;
  --series-metalloid: #854d0e;
  --series-halogen: #6b21a8;
  --series-transition: #0369a1;
  --series-poor: #334155;
  --series-lanthanoid: #831843;
  --series-actinoid: #701a75;
  --series-unknown: #374151;

  --body-bg: #0f172a;
  --surface-card: #1e293b;
  --border-color: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --hover-highlight: #1e3a5f;
  --active-tab-color: #38bdf8;
}

/* Accessibility & Screen Reader SEO Utilities */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}