@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai/Almarai-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai/Almarai-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai/Almarai-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai/Almarai-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --blue-0: #E7EBF4;
  --blue-1: #6982E2;
  --blue-2: #3E57A4;
  --blue-3: #263D84;
  --blue-4: #12204B;

  --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: #D7D7D7;
  --neutral-2: #787B84;
  --neutral-3: #3E4047;
  --neutral-4: #1B1C20;

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

  --gold-100:#FFF6E0;
  --gold-200:#F3DB8E;
  --gold-0: #E3C35E;
  --gold-1: #C6A84E;
  --gold-2: #B79D4A;

  --accent-teal: #33888F;
  --accent-teal-50: #E6F0F1;
  --accent-red: #9E2E42;
  --accent-red-50: #F1E0DA;
  --accent-yellow: #E67E22;
  --accent-yellow-50: #FFF1E5;
  --accent-white: #FFFFFF;
  --color-orange:#AE842F;

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

  --color-secondary: var(--gold-1);
  --color-secondary-0: var(--gold-0);
  --color-secondary-1: var(--gold-1);
  --color-secondary-2: var(--gold-2);
  --color-secondary-3: var(--gold-200);

  --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: 'Almarai', sans-serif;
  --font-base: 'Almarai', sans-serif;
  --color-primary-rgb: 121, 52, 191;
  --header-height: 0px;
  --color-dark: var(--color-primary-4);
  --color-medium: var(--color-primary-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; }