:root {
  /* Typography */
  --font-family-base: "Nunito", sans-serif;

  /* Spacing scale
     Everything starts from a 4px unit so larger values stay related. */
  --space-unit: 4px;
  --space-0: 0;
  --space-1: var(--space-unit); /* 4px */
  --space-2: calc(var(--space-unit) * 2); /* 8px */
  --space-3: calc(var(--space-unit) * 3); /* 12px */
  --space-4: calc(var(--space-2) * 2); /* 16px */
  --space-5: calc(var(--space-unit) * 5); /* 20px */
  --space-6: calc(var(--space-3) * 2); /* 24px */
  --space-7: calc(var(--space-unit) * 7); /* 28px */
  --space-8: calc(var(--space-4) * 2); /* 32px */
  --space-9: calc(var(--space-unit) * 9); /* 36px */
  --space-10: calc(var(--space-5) * 2); /* 40px */
  --space-11: calc(var(--space-unit) * 11); /* 44px */
  --space-12: calc(var(--space-6) * 2); /* 48px */
  --space-15: calc(var(--space-unit) * 15); /* 60px */
  --space-24: calc(var(--space-unit) * 24); /* 96px */

  /* Layout */
  --sidebar-width: calc(var(--space-unit) * 55); /* 220px */
  --curriculum-max-width: calc(var(--space-unit) * 250); /* 1000px */
  --hero-max-width: calc(var(--space-unit) * 110); /* 440px */

  /* Borders and corners */
  --border-width-soft: calc(var(--space-unit) / 2); /* 2px */
  --border-width-strong: calc(var(--space-unit) * 0.625); /* 2.5px */
  --radius-sm: calc(var(--space-unit) * 2.5); /* 10px */
  --radius-md: calc(var(--space-unit) * 3); /* 12px */
  --radius-lg: calc(var(--space-unit) * 3.5); /* 14px */
  --radius-xl: calc(var(--space-unit) * 4); /* 16px */
  --radius-2xl: calc(var(--space-unit) * 4.5); /* 18px */
  --radius-3xl: calc(var(--space-unit) * 5); /* 20px */
  --radius-4xl: calc(var(--space-unit) * 7.5); /* 30px */
  --radius-card: var(--space-2); /* 8px */
  --radius-pill: 999px;

  /* Animation */
  --transition-fast: 0.12s ease;
  --transition-base: 0.15s ease;

  /* Shadows */
  --shadow-primary: var(--space-1) var(--space-1) 0 #c43000;
  --shadow-dark: var(--space-1) var(--space-1) 0 #0a0018;
  --shadow-success: calc(var(--space-unit) / 2) calc(var(--space-unit) / 2) 0 #3aad66;

  /* Core neutrals */
  --color-text-strong: #1e0a3c;
  --color-text-muted: #9a8faa;
  --color-text-faint: #ccc;
  --color-surface-app: #f7f8fb;
  --color-surface-panel: #fffaf8;
  --color-surface-card: #ffffff;
  --color-surface-soft: #f6f3ff;
  --color-border-soft: #eee7e2;
  --color-border-card: #eeeef5;
  --color-border-card-hover: #dddde8;
  --color-border-focus: #bde5ff;

  /* Primary palette */
  --color-primary-050: #fff0ec;
  --color-primary-100: #ffe8e0;
  --color-primary-200: #ffd4c8;
  --color-primary-300: #ffd0bc;
  --color-primary-400: #ffb39a;
  --color-primary-500: #ff7043;
  --color-primary-600: #ff5722;
  --color-primary-700: #e04a19;
  --color-primary-800: #c43000;
  --color-primary-900: #e64a19;

  /* Accent palettes */
  --color-success-050: #dffbee;
  --color-success-100: #c8f5dc;
  --color-success-200: #c8f0da;
  --color-success-500: #52c97a;
  --color-success-700: #1a7a48;

  --color-warning-050: #fff8d6;
  --color-warning-500: #ffd234;
  --color-warning-700: #856400;

  --color-info-050: #eef2ff;
  --color-info-100: #dde4ff;
  --color-info-500: #5b72e8;
  --color-info-600: #60bfff;

  --color-lavender-050: #f0eef8;
  --color-lavender-100: #e4dfff;
  --color-lavender-500: #6b5ea8;

  /* Gamification: streak flame + level-tier badge colours */
  --color-flame: #ff7043;
  --color-flame-glow: #ffd234;
  --color-xp-bar: #ff9356;
  --color-tier-slate: #8b8aa0;
  --color-tier-bronze: #c87f3a;
  --color-tier-silver: #8fa3b8;
  --color-tier-gold: #e0a92e;
  --color-tier-amethyst: #9b6fd4;
}