:root {
  /* ── Core Colours ── */
  --color-primary: #6D3CFF;
  --color-secondary: #FF5C83;
  --color-accent: #FF8A00;

  --color-primary-gradient: linear-gradient(135deg, #FF8A00 0%, #FF4F81 50%, #6D3CFF 100%);

  --color-background: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F6F8FB;
  --color-surface-container: #EFF1F7;
  --color-surface-container-high: #E8EAF2;
  --color-surface-container-highest: #DEE1EC;

  --color-on-primary: #FFFFFF;
  --color-on-surface: #1B1D29;
  --color-on-surface-variant: #5A5D70;
  --color-on-background: #1B1D29;

  --color-outline: #8C8FA3;
  --color-outline-variant: #DDE0EA;

  /* ── Semantic Colours ── */
  --color-success: #00B46E;
  --color-success-container: #E5F8F0;
  --color-warning: #F6A609;
  --color-warning-container: #FFF4E0;
  --color-error: #E53935;
  --color-error-container: #FDEAEA;
  --color-info: #2C7BFF;
  --color-info-container: #E8F1FF;

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

  /* ── Border Radius ── */
  --radius-default: 8px;
  --radius-button: 8px;
  --radius-card: 16px;
  --radius-dialog: 20px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-primary: 'Inter', sans-serif;

  /* ── Shadows ── */
  --shadow-primary: 0 10px 30px rgba(109, 60, 255, 0.2);
  --shadow-card: 0 4px 24px rgba(27, 29, 41, 0.08);

    --primary: var(--color-primary);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --background: var(--color-background);
  --surface: var(--color-surface);
  --text: var(--color-on-surface);
  --color-primary-container: #8B6FFF;
}

/* ── Dark Mode Overrides ── */
.dark {
  --color-surface: #15161F;
  --color-surface-container-lowest: #111219;
  --color-surface-container-low: #1B1D29;
  --color-surface-container: #21232F;
  --color-surface-container-high: #2A2C3A;
  --color-surface-container-highest: #333546;
  --color-on-surface: #ECECF2;
  --color-on-surface-variant: #B3B5C4;
  --color-background: #111219;
  --color-on-background: #ECECF2;
  --color-outline: #8C8FA3;
  --color-outline-variant: #333546;
}