: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) - 11 levels, index 0-10 */
  --gym-0: #1c2128;
  --gym-1: #6b2800;
  --gym-2: #b04800;
  --gym-3: #c45e00;
  --gym-4: #d07400;
  --gym-5: #d88600;
  --gym-6: #e09400;
  --gym-7: #e8a000;
  --gym-8: #f0ac10;
  --gym-9: #f4b830;
  --gym-10: #e8c000;

  /* Lari (magenta) - 11 levels, index 0-10 */
  --lari-0: #1c2128;
  --lari-1: #7a0058;
  --lari-2: #a40072;
  --lari-3: #bc1884;
  --lari-4: #cc2c96;
  --lari-5: #d840a2;
  --lari-6: #e050b0;
  --lari-7: #e862bc;
  --lari-8: #ee74c6;
  --lari-9: #f288d0;
  --lari-10: #ec96d0;

  /* 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(232, 160, 0, 0.3);
  --glow-lari: 0 0 24px rgba(232, 98, 188, 0.3);

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

[data-theme="light"] {
  --color-bg: #f0f4f8;
  --color-surface: #ffffff;
  --color-surface-raised: #e8edf2;
  --color-border: #cdd3da;
  --color-text: #1f2328;
  --color-text-muted: #57606a;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-card-inset: inset 0 1px 0 rgba(0, 0, 0, 0.03);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.12);
}