:root {
  --font-main: "Cairo", system-ui, sans-serif;
  --radius-card: 20px;
  --radius-btn: 14px;
  --shadow-card: 0 8px 28px rgba(27, 77, 46, 0.12);
  --nav-h: 76px;
  --space-section: 18px;
  --space-gap: 10px;
  --space-inner: 14px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --viewport-h: 100vh;
  --viewport-h: 100dvh;

  --green-900: #0f3d24;
  --green-700: #1b5e34;
  --green-500: #2d8a52;
  --green-400: #3da866;
  --green-100: #e8f5ec;
  --white: #ffffff;
  --text: #1a2e22;
  --text-muted: #5a6f62;
  --border: rgba(45, 138, 82, 0.18);
  --bg: #f7fbf8;
  --bg-card: #ffffff;
  --accent-gradient: linear-gradient(145deg, var(--green-700), var(--green-400));
  --danger: #c62828;
  --scrollbar-track: #e8f0eb;
  --scrollbar-thumb: var(--green-500);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --green-900: #8b1e2d;
  --green-700: #a82838;
  --green-500: #c43a4f;
  --green-400: #e25568;
  --green-100: #2a1a1d;
  --white: #1a1a1e;
  --text: #f2ecee;
  --text-muted: #b8a8ad;
  --border: rgba(196, 58, 79, 0.25);
  --bg: #121214;
  --bg-card: #1e1e22;
  --accent-gradient: linear-gradient(145deg, #6b1524, #c43a4f);
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.45);
  --scrollbar-track: #252528;
  --scrollbar-thumb: #c43a4f;
}