@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/tajawal-500.ttf") format("truetype");
}

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

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

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-400.ttf") format("truetype");
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-500.ttf") format("truetype");
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-600.ttf") format("truetype");
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-700.ttf") format("truetype");
}

:root {
    /* Primitive tokens. */
    --kenz-brand-coral: #F3736A;
    --kenz-brand-purple: #582E89;
    --kenz-brand-teal: #269B98;
    --kenz-brand-yellow: #F5B417;
    --kenz-teal-600: #1F8582;
    --kenz-teal-900: #155554;
    --kenz-teal-800: #196563;
    --kenz-teal-700: #1C7472;
    --kenz-teal-500: #269B98;
    --kenz-teal-400: #62B4B3;
    --kenz-teal-300: #9AD0CF;
    --kenz-teal-200: #CDE9E8;
    --kenz-teal-100: #E6F4F3;
    --kenz-teal-50: #F5FAFA;
    --kenz-coral-600: #D85B53;
    --kenz-coral-900: #78302C;
    --kenz-coral-800: #9F3B36;
    --kenz-coral-700: #C64942;
    --kenz-coral-500: #F3736A;
    --kenz-coral-400: #F5958E;
    --kenz-coral-200: #F5BCB8;
    --kenz-coral-100: #FBE8E6;
    --kenz-coral-50: #FFF7F6;
    --kenz-purple-900: #241238;
    --kenz-purple-800: #30194B;
    --kenz-purple-700: #3C1F5F;
    --kenz-purple-600: #4A2674;
    --kenz-purple-500: #582E89;
    --kenz-purple-400: #704C9B;
    --kenz-purple-300: #AF9EC9;
    --kenz-purple-200: #E1DBE9;
    --kenz-purple-100: #F0ECF5;
    --kenz-purple-50: #FAF8FC;
    --kenz-gold-900: #684B05;
    --kenz-gold-800: #8D6606;
    --kenz-gold-700: #B78308;
    --kenz-gold-600: #D99C0D;
    --kenz-gold-500: #F5B417;
    --kenz-gold-400: #F6C857;
    --kenz-gold-300: #F7E7B6;
    --kenz-gold-200: #F9F2D8;
    --kenz-gold-100: #FDF7E4;
    --kenz-gold-50: #FFFBF0;
    --kenz-neutral-0: #FFFFFF;
    --kenz-neutral-25: #FCFBFC;
    --kenz-neutral-50: #F8F6F9;
    --kenz-neutral-100: #F3F0F5;
    --kenz-neutral-200: #E9E4EC;
    --kenz-neutral-300: #DDD6E2;
    --kenz-neutral-400: #C9BFCE;
    --kenz-text-heading: #342742;
    --kenz-text-primary: #463B50;
    --kenz-text-secondary: #655D70;
    --kenz-text-muted: #827A8A;
    --kenz-text-disabled: #A69FAB;
    --kenz-brand-primary: var(--kenz-brand-coral);
    --kenz-white: #FFFFFF;
    --kenz-space-1: 0.25rem;
    --kenz-space-2: 0.5rem;
	--kenz-space-2-5: 0.625rem;
    --kenz-space-3: 0.75rem;
	--kenz-space-3-75: 0.9375rem;
    --kenz-space-4: 1rem;
    --kenz-space-5: 1.25rem;
    --kenz-space-6: 1.5rem;
    --kenz-space-7: 1.75rem;
    --kenz-space-8: 2rem;
    --kenz-space-10: 2.5rem;
    --kenz-space-12: 3rem;
    --kenz-space-16: 4rem;
    --kenz-space-20: 5rem;
    --kenz-radius-sm: 0.5rem;
    --kenz-radius-md: 0.75rem;
    --kenz-radius-lg: 1rem;
    --kenz-radius-pill: 999rem;
    --kenz-line-thin: 1px;
    --kenz-shadow-lead: 0 1.25rem 3.5rem rgb(88 46 137 / 10%);
    --kenz-shadow-soft: 0 .6rem 2rem rgb(88 46 137 / 14%);
    --kenz-shadow-card: 0 1.25rem 2.5rem rgb(88 46 137 / 18%);
    --kenz-shadow-primary: 0 0 0 3px rgb(88 46 137 / 15%);
    --kenz-shadow-primary-soft: 0 2px 10px rgb(88 46 137 / 4%);
    --kenz-shadow-primary-raised: 0 4px 14px rgb(88 46 137 / 20%);
    --kenz-shadow-primary-hover: 0 6px 18px rgb(88 46 137 / 30%);
    --kenz-shadow-coral-raised: 0 4px 18px rgb(243 115 106 / 30%);
    --kenz-shadow-coral-hover: 0 6px 24px rgb(243 115 106 / 40%);
    --kenz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --kenz-duration-fast: 160ms;
    --kenz-font-display: "Tajawal", sans-serif;
    --kenz-font-body: "IBM Plex Sans Arabic", sans-serif;
    --kenz-text-xs: 0.8125rem;
    --kenz-text-2xs: 0.75rem;
	--kenz-text-caption: 0.875rem;
    --kenz-text-sm: 0.9375rem;
    --kenz-text-md: 1rem;
    --kenz-text-lg: 1.125rem;
    --kenz-text-xl: 1.5rem;
    --kenz-text-2xl: clamp(1.75rem, 5vw, 2.25rem);
    --kenz-text-display: clamp(2.25rem, 8vw, 3.5rem);
    /* Semantic tokens. */
    --kenz-color-page: var(--kenz-neutral-25);
    --kenz-color-surface: var(--kenz-neutral-0);
    --kenz-color-surface-soft: var(--kenz-neutral-100);
    --kenz-color-text: var(--kenz-text-primary);
    --kenz-color-text-muted: var(--kenz-text-secondary);
    --kenz-color-primary: var(--kenz-purple-500);
    --kenz-color-primary-hover: var(--kenz-purple-600);
    --kenz-color-primary-soft: var(--kenz-purple-50);
    --kenz-color-accent: var(--kenz-coral-500);
    --kenz-color-accent-hover: var(--kenz-coral-600);
    --kenz-color-accent-text: var(--kenz-coral-900);
    --kenz-color-accent-soft: var(--kenz-coral-50);
    --kenz-color-support: var(--kenz-teal-500);
    --kenz-color-support-soft: var(--kenz-teal-100);
    --kenz-color-highlight: var(--kenz-gold-500);
    --kenz-color-highlight-soft: var(--kenz-gold-50);
    --kenz-color-border: var(--kenz-neutral-200);
    --kenz-color-border-strong: var(--kenz-neutral-300);
    --kenz-color-focus: var(--kenz-teal-700);
    --kenz-color-focus-on-dark: var(--kenz-gold-400);
    --kenz-color-focus-on-accent: var(--kenz-neutral-0);
    --kenz-color-error-text: var(--kenz-coral-900);
    --kenz-color-error-surface: var(--kenz-coral-50);
    --kenz-color-header: rgb(255 255 255 / 94%);
    --kenz-color-on-primary-border: rgb(255 255 255 / 60%);
    --kenz-color-scrim: rgb(36 18 56 / 82%);
    --kenz-color-surface-translucent: rgb(255 255 255 / 72%);
    --kenz-color-surface-border-translucent: rgb(88 46 137 / 12%);
    --kenz-color-on-primary-border-soft: rgb(255 255 255 / 50%);
    --kenz-color-on-primary-border-strong: rgb(255 255 255 / 70%);
    --kenz-color-primary-border-translucent: rgb(88 46 137 / 13%);
    --kenz-color-primary-alpha-04: rgb(88 46 137 / 4%);
    --kenz-color-primary-alpha-12: rgb(88 46 137 / 12%);
    --kenz-color-primary-alpha-13: rgb(88 46 137 / 13%);
    --kenz-color-primary-alpha-14: rgb(88 46 137 / 14%);
    --kenz-color-primary-alpha-15: rgb(88 46 137 / 15%);
    --kenz-color-primary-alpha-18: rgb(88 46 137 / 18%);
    --kenz-color-primary-alpha-20: rgb(88 46 137 / 20%);
    --kenz-color-primary-alpha-30: rgb(88 46 137 / 30%);
    --kenz-color-accent-alpha-15: rgb(243 115 106 / 15%);
    --kenz-color-accent-alpha-30: rgb(243 115 106 / 30%);
    --kenz-color-accent-alpha-40: rgb(243 115 106 / 40%);
    --kenz-button-commerce-bg: var(--kenz-gold-500);
    --kenz-button-commerce-bg-hover: var(--kenz-gold-400);
    --kenz-button-commerce-bg-active: var(--kenz-gold-600);
    --kenz-button-commerce-text: var(--kenz-text-heading);
    --kenz-button-secondary-bg: var(--kenz-teal-100);
    --kenz-button-secondary-bg-hover: var(--kenz-teal-200);
    --kenz-button-secondary-text: var(--kenz-teal-900);
    --kenz-button-secondary-border: var(--kenz-teal-300);
    --kenz-gradient-soft: linear-gradient(135deg, var(--kenz-coral-50) 0%, var(--kenz-purple-50) 50%, var(--kenz-teal-50) 100%);
    --kenz-content-width: 75rem;
    --kenz-reading-width: 42rem;
    --kenz-copy-width: 52ch;
    --kenz-headline-width: 14ch;
    --kenz-control-height: 3.25rem;
    /* Component tokens. */
    --kenz-header-height: 5rem;
    --kenz-section-gap: var(--kenz-space-16);
    --kenz-control-radius: var(--kenz-radius-md);
    --kenz-card-radius: var(--kenz-radius-lg);
    --kenz-chip-radius: var(--kenz-radius-pill);
    --kenz-card-border: var(--kenz-line-thin) solid var(--kenz-color-border);
    --kenz-focus-width: 3px;
    --kenz-icon-size: 1.4em;
    --kenz-brand-logo-height: 2.5rem;
    --kenz-brand-logo-height-mobile: 2.125rem;
    --kenz-course-title-size: clamp(2.05rem, 7vw, 3rem);
    --kenz-course-utility-size: var(--kenz-text-2xs);
    --kenz-step-number-size: 2rem;
    --kenz-select-marker-size: 0.55rem;
    --kenz-select-marker-line: 2px;
    --kenz-shelf-accent-width: 0.25rem;
    --kenz-shelf-accent-height: 1.15em;
    --kenz-media-aspect: 16 / 10;
    --kenz-course-media-aspect: 1600 / 1074;
    --kenz-course-card-media-aspect: var(--kenz-course-media-aspect);
    --kenz-media-duration: 480ms;
    --kenz-media-hover-scale: 1.025;
    --kenz-course-image-padding: 0.35rem;
    --kenz-fallback-icon-size: 3rem;
    --kenz-empty-icon-size: 4rem;
    --kenz-visually-hidden-size: 1px;
    --kenz-dashboard-sidebar-width: 17.125rem;
    --kenz-dashboard-content-width: 59rem;
    --kenz-learning-sidebar-width: 20rem;
    --kenz-learning-content-width: 64rem;
    --kenz-learning-header-height: 4.5rem;
}