:root {
  color-scheme: dark;
  --bg: #060b17;
  --bg-2: #0b1424;
  --card: #101a2f;
  --line: #223250;
  --text: #e8f0ee;
  --muted: #93a9b5;
  --mint: #10b981;
  --mint-soft: #34d399;
  --sky: #38bdf8;
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #10b981;
  --brand-gradient: linear-gradient(135deg, #34d399, #0ea5e9);
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.24);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.16);
  --font-body: "Inter", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-arabic: "Cairo", sans-serif;
  --radius-sm: 8px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --content: 1180px;
  --sidebar: 248px;
  --focus: 0 0 0 3px rgba(52, 211, 153, 0.4);
  --surface-glass: rgba(16, 26, 47, 0.78);
  --surface-strong: rgba(11, 20, 36, 0.96);
  --surface-sheen: rgba(232, 240, 238, 0.09);
  --line-shine: rgba(190, 246, 229, 0.22);
  --accent-champagne: #f2c985;
  --accent-lilac: #a99cff;
  --shadow-lift: 0 28px 80px rgba(0, 0, 0, 0.34);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f8f7;
  --bg-2: #ffffff;
  --card: #ffffff;
  --line: #d5e2de;
  --text: #0b1f1a;
  --muted: #4d6560;
  --mint: #0a8f63;
  --mint-soft: #10b981;
  --sky: #0b7bb5;
  --danger: #dc2626;
  --warn: #b45309;
  --ok: #0a8f63;
  --shadow: 0 20px 56px rgba(14, 48, 36, 0.08);
  --shadow-soft: 0 10px 30px rgba(14, 48, 36, 0.06);
  --surface-glass: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --surface-sheen: rgba(255, 255, 255, 0.88);
  --line-shine: rgba(10, 143, 99, 0.16);
  --accent-champagne: #8b5a14;
  --accent-lilac: #6752ba;
  --shadow-lift: 0 28px 80px rgba(14, 48, 36, 0.15);
}