@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --vivid-purple-0: #F3EFFC;
  --vivid-purple-1: #D4C1F5;
  --vivid-purple-2: #7934BF;
  --vivid-purple-3: #4E1F7E;
  --vivid-purple-4: #270C43;

  --deep-violet-0: #DEDCF7;
  --deep-violet-1: #B6B1ED;
  --deep-violet-2: #4533B4;
  --deep-violet-3: #271C6E;
  --deep-violet-4: #0F0936;

  --neutral-0: #F2F2F2;
  --neutral-1: #CACACA;
  --neutral-2: #A3A3A3;
  --neutral-3: #393939;
  --neutral-4: #1B1B1B;

  --sky-blue-0: #A6DBF4;
  --sky-blue-1: #69C2ED;
  --sky-blue-2: #2CA9E6;

  --magenta-0: #CD70A3;
  --magenta-1: #BF498A;
  --magenta-2: #9C376F;

  --accent-teal: #33888F;
  --accent-teal-50: #E6F0F1;
  --accent-red: #9E2E42;
  --accent-red-50: #F1E0DA;
  --accent-yellow: #F5C21F;
  --accent-yellow-50: #FFFDE2;
  --accent-white: #FFFFFF;

  /* Semantic tokens */
  --color-primary: var(--vivid-purple-2);
  --color-primary-0: var(--vivid-purple-0);
  --color-primary-1: var(--vivid-purple-1);
  --color-primary-2: var(--vivid-purple-2);
  --color-primary-3: var(--vivid-purple-3);
  --color-primary-4: var(--vivid-purple-4);

  --color-secondary: var(--magenta-1);
  --color-secondary-0: var(--magenta-0);
  --color-secondary-1: var(--magenta-1);
  --color-secondary-2: var(--magenta-2);

  --color-accent: var(--sky-blue-2);
  --color-accent-0: var(--sky-blue-0);
  --color-accent-1: var(--sky-blue-1);
  --color-accent-2: var(--sky-blue-2);
  --color-success: #28a745;
  --color-warning: var(--accent-yellow);
  --color-danger: var(--accent-red);
  --color-info: var(--sky-blue-1);

  --color-text: var(--neutral-4);
  --color-muted: var(--neutral-2);
  --color-bg: var(--accent-white);
  --color-bg-alt: var(--neutral-0);
  --border-color: var(--neutral-1);

  --radius-card: 12px;

  --font-heading: 'Cairo', sans-serif;
  --font-base: 'Cairo', sans-serif;
  --color-primary-rgb: 121, 52, 191;
  --header-height: 0px;
  --color-dark: var(--vivid-purple-4);
  --color-medium: var(--vivid-purple-2);
  --text-light: var(--neutral-0);
  --bs-card-bg: var(--accent-teal-50);
}

.course-default {
  border-radius: var(--radius-card) !important;
}

body {
  font-family: var(--font-base);
}

/* Utility classes */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-muted { color: var(--color-muted) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-light { background-color: var(--color-bg-alt) !important; }
.bg-white { background-color: var(--color-bg) !important; }
.border-color { border-color: var(--border-color) !important; }

/* Button helpers (optional) */
.btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.btn-secondary { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; }