:root {
  --accent-50: #edfaf4;
  --accent-100: #d0f4e6;
  --accent-300: #6dd9ae;
  --accent-500: #1a936f;
  --accent-600: #147a5b;
  --accent-700: #0f6249;
  --accent-neon: #00d887;
  --accent-electric: #00c9b0;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --brand-purple-300: #978ef8;
  --brand-purple-500: #716cee;
  --brand-purple-600: #615fea;
  --brand-mint: #82dcbd;
  --surface-base: #f8fafc;
  --surface-card: #ffffff;
  --surface-soft: #f1f5f9;
  --surface-nav: rgba(248, 250, 252, 0.86);
  --text-primary: #0f172a;
  --text-muted: #64748b;
  --border-soft: #e2e8f0;
  --border-strong: #cbd5e1;
  --focus-ring: rgba(26, 147, 111, 0.55);
  --shadow-card: 0 12px 28px rgba(15, 23, 42, 0.08), 0 2px 7px rgba(15, 23, 42, 0.05);
  --shadow-soft: 0 7px 20px rgba(15, 23, 42, 0.07);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --font-ui: "Manrope", "Inter", "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --accent-50: rgba(0, 216, 135, 0.1);
  --accent-500: #00d887;
  --accent-600: #25dfa0;
  --accent-700: #6de6bd;
  --surface-base: #04040e;
  --surface-card: #0d0d1e;
  --surface-soft: #13131f;
  --surface-nav: rgba(4, 4, 14, 0.84);
  --text-primary: #f4f4f5;
  --text-muted: #a1a1aa;
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.34), 0 0 28px rgba(0, 216, 135, 0.04);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
}