:root {
  /* Base surface colors (dark theme) */
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-surface-raised: #1c2128;
  --color-border: #30363d;
  --color-text: #e6edf3;
  --color-text-muted: #8b949e;

  /* Sholat (green) — 6 levels, index 0-5 */
  --sholat-0: #161b22;
  --sholat-1: #0e4429;
  --sholat-2: #006d32;
  --sholat-3: #26a641;
  --sholat-4: #39d353;
  --sholat-5: #56f08a;

  /* Gym (orange → amber → gold) — 11 levels, index 0-10 */
  --gym-0: #1c2128;
  --gym-1: #1e0a00;
  --gym-2: #3c1800;
  --gym-3: #5e2800;
  --gym-4: #803800;
  --gym-5: #a24c00;
  --gym-6: #c46200;
  --gym-7: #e07800;
  --gym-8: #f09820;
  --gym-9: #f8b840;
  --gym-10: #ffd862;

  /* Lari (indigo → purple → violet → lilac) — 11 levels, index 0-10 */
  --lari-0: #1c2128;
  --lari-1: #0c0630;
  --lari-2: #1a1050;
  --lari-3: #2e1870;
  --lari-4: #402290;
  --lari-5: #5830b0;
  --lari-6: #7248cc;
  --lari-7: #9060e4;
  --lari-8: #ac7cf8;
  --lari-9: #cc9cff;
  --lari-10: #eec8ff;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Glow shadows, used sparingly for active/highlighted states */
  --glow-sholat: 0 0 24px rgba(57, 211, 83, 0.25);
  --glow-gym: 0 0 24px rgba(224, 120, 0, 0.3);
  --glow-lari: 0 0 24px rgba(144, 96, 228, 0.3);

  /* Font */
  --font-app: 'Play', sans-serif;
}