/* GENERATED FILE — DO NOT EDIT BY HAND.
 * Source of truth: injaazy-design-system/tokens/*.json
 * Rebuild: (in injaazy-design-system) npm run build && npm run sync
 */

:root,
.light {
   --ij-ref-color-teal-50: #e8f5f4;
   --ij-ref-color-teal-100: #daf1f0;
   --ij-ref-color-teal-200: #a9dedb;
   --ij-ref-color-teal-300: #3fbfb9;
   --ij-ref-color-teal-400: #0ea9a4;
   --ij-ref-color-teal-500: #2b7a78;
   --ij-ref-color-teal-600: #126d6a;
   --ij-ref-color-teal-700: #0c4a48;
   --ij-ref-color-teal-800: #005241;
   --ij-ref-color-teal-850: #004638;
   --ij-ref-color-teal-900: #06201f;
   --ij-ref-color-gold-300: #d8b24a;
   --ij-ref-color-gold-500: #ac8c28;
   --ij-ref-color-neutral-0: #ffffff;
   --ij-ref-color-neutral-25: #fefefe;
   --ij-ref-color-neutral-50: #fafafa;
   --ij-ref-color-neutral-75: #f8f8f8;
   --ij-ref-color-neutral-100: #ededed;
   --ij-ref-color-neutral-200: #cdcdcd;
   --ij-ref-color-neutral-700: #323232;
   --ij-ref-color-neutral-800: #242424;
   --ij-ref-color-gray-50: #f2f5f4;
   --ij-ref-color-gray-100: #eaecee;
   --ij-ref-color-gray-200: #dee3e3;
   --ij-ref-color-gray-300: #a7b4b3;
   --ij-ref-color-gray-400: #788c8b;
   --ij-ref-color-gray-500: #536564;
   --ij-ref-color-gray-700: #2e3a39;
   --ij-ref-color-gray-800: #1f2a29;
   --ij-ref-color-gray-850: #161e1d;
   --ij-ref-color-gray-900: #0e1413;
   --ij-ref-color-green-50: #ebf6ec;
   --ij-ref-color-green-300: #4cc85b;
   --ij-ref-color-green-400: #1cbd12;
   --ij-ref-color-green-500: #00910e;
   --ij-ref-color-green-600: #005b09;
   --ij-ref-color-green-900: #14301a;
   --ij-ref-color-red-50: #fbe9e7;
   --ij-ref-color-red-300: #f07167;
   --ij-ref-color-red-500: #db2719;
   --ij-ref-color-red-700: #b72115;
   --ij-ref-color-red-900: #3a1614;
   --ij-ref-color-orange-50: #fff4e6;
   --ij-ref-color-orange-300: #ffb74d;
   --ij-ref-color-orange-500: #ff9500;
   --ij-ref-color-orange-900: #3a2a12;
   --ij-ref-color-yellow-50: #fff9e5;
   --ij-ref-color-yellow-300: #ffeb3b;
   --ij-ref-color-blue-50: #e6f8fd;
   --ij-ref-color-blue-300: #64b6d6;
   --ij-ref-color-blue-500: #2b89a6;
   --ij-ref-color-legacy-dashboard-main: #189eb2;
   --ij-ref-color-legacy-dashboard-main-dark: #0e6b89;
   --ij-ref-color-legacy-dashboard-action: #008b8a;
   --ij-ref-color-legacy-dashboard-panel: #0e8a8c;
   --ij-ref-color-legacy-dashboard-panel-dark: #0a6e70;
   --ij-ref-color-legacy-dashboard-report: #008f91;
   --ij-ref-color-legacy-dashboard-report-dark: #006d74;
   --ij-ref-color-legacy-dashboard-sitebar: #013f47;
   --ij-ref-color-legacy-dashboard-sitebar-active: #01797c;
   --ij-ref-color-legacy-dashboard-btn-teal: #169fb3;
   --ij-ref-color-legacy-dashboard-teal-tint: #e9f4f4;
   --ij-ref-color-legacy-dashboard-teal-tint-2: #d3ebeb;
   --ij-ref-color-legacy-dashboard-ink: #173448;
   --ij-ref-color-legacy-dashboard-navy: #0c2c4a;
   --ij-ref-color-legacy-dashboard-text: #1b2c4a;
   --ij-ref-color-legacy-dashboard-muted: #6a8094;
   --ij-ref-color-legacy-dashboard-muted-light: #8aa0b0;
   --ij-ref-color-legacy-dashboard-line: #e6ebef;
   --ij-ref-color-legacy-dashboard-line-2: #eef2f5;
   --ij-ref-color-legacy-dashboard-canvas: #f2f6f8;
   --ij-ref-color-legacy-dashboard-amber: #c98a1e;
   --ij-ref-color-legacy-dashboard-amber-tint: #fbf3e2;
   --ij-ref-color-legacy-teacher-accent-yellow: #fff700;
   --ij-ref-color-legacy-teacher-warning: #e08300;
   --ij-ref-color-legacy-teacher-info-indigo: #3419c8;
   --ij-ref-color-legacy-teacher-blue: #2c64d3;
   --ij-ref-color-legacy-teacher-dark-blue: #005fff;
   --ij-ref-color-legacy-teacher-purple: #aa2ca6;
   --ij-ref-color-legacy-teacher-grey: #666666;
   --ij-ref-color-legacy-teacher-light-grey: #bcbcbc;
   --ij-ref-color-legacy-chat-teal: #3f7a75;
   --ij-ref-color-legacy-chat-gold: #c8a24a;
   --ij-ref-color-legacy-chat-cream: #eff5ee;
   --ij-ref-color-legacy-chat-green-700: #3b6a4e;
   --ij-space-s1: 4px;
   --ij-space-s2: 8px;
   --ij-space-s3: 12px;
   --ij-space-s4: 16px;
   --ij-space-s5: 20px;
   --ij-space-s6: 24px;
   --ij-space-s8: 32px;
   --ij-space-s12: 48px;
   --ij-radius-sm: 8px;
   --ij-radius-md: 12px;
   --ij-radius-lg: 16px;
   --ij-radius-xl: 24px;
   --ij-radius-pill: 999px;
   --ij-size-touch-target-min: 48px;
   --ij-elevation-card: 0px 4px 12px 0px rgb(0 0 0 / 0.06);
   --ij-elevation-sheet: 0px -4px 24px 0px rgb(0 0 0 / 0.1);
   --ij-elevation-floating: 0px 6px 16px 0px rgb(0 0 0 / 0.14);
   --ij-font-family-ui: Tajawal, 'Segoe UI', system-ui, -apple-system, sans-serif;
   --ij-font-family-quran-page: QCF4;
   --ij-font-family-quran-chrome: Neirizi, ArabicNumber;
   --ij-font-weight-light: 300;
   --ij-font-weight-regular: 400;
   --ij-font-weight-medium: 500;
   --ij-font-weight-semibold: 600;
   --ij-font-weight-bold: 700;
   --ij-font-weight-extrabold: 800;
   --ij-font-size-caption: 12px;
   --ij-font-size-body-sm: 14px;
   --ij-font-size-body: 16px;
   --ij-font-size-h3: 18px;
   --ij-font-size-h2: 20px;
   --ij-font-size-h1: 24px;
   --ij-font-size-display: 28px;
   --ij-font-line-height-tight: 1.2;
   --ij-font-line-height-snug: 1.35;
   --ij-font-line-height-normal: 1.4;
   --ij-font-line-height-quran: 1.9;
   --ij-color-bg-canvas: #fafafa;
   --ij-color-bg-surface: #fefefe;
   --ij-color-bg-surface-variant: #f8f8f8;
   --ij-color-text-primary: #242424;
   --ij-color-text-secondary: #536564;
   --ij-color-text-disabled: #a7b4b3;
   --ij-color-text-on-action: #fefefe;
   --ij-color-action-primary: #126d6a;
   --ij-color-action-primary-hover: #0f5b58;
   --ij-color-action-primary-tint: rgb(18 109 106 / 0.1);
   --ij-color-action-secondary: #0ea9a4;
   --ij-color-accent-gold: #ac8c28;
   --ij-color-border-default: #dee3e3;
   --ij-color-border-strong: #a7b4b3;
   --ij-color-border-focus: #0ea9a4;
   --ij-color-status-success-fg: #00910e;
   --ij-color-status-success-bg: #ebf6ec;
   --ij-color-status-warning-fg: #ff9500;
   --ij-color-status-warning-bg: #fff4e6;
   --ij-color-status-danger-fg: #db2719;
   --ij-color-status-danger-bg: #fbe9e7;
   --ij-color-status-info-fg: #2b89a6;
   --ij-color-status-info-bg: #e6f8fd;
   --ij-color-overlay-shadow: rgb(0 0 0 / 0.06);
   --ij-color-overlay-scrim: rgb(0 0 0 / 0.46);
   --ij-comp-button-height-sm: 40px;
   --ij-comp-button-height-md: 48px;
   --ij-comp-button-height-lg: 56px;
   --ij-comp-button-radius: 12px;
   --ij-comp-button-font-size: 14px;
   --ij-comp-button-font-weight: 700;
   --ij-comp-card-radius: 16px;
   --ij-comp-card-padding: 16px;
   --ij-comp-field-radius: 12px;
   --ij-comp-field-height: 48px;
   --ij-comp-field-fill: #f8f8f8;
   --ij-comp-chip-radius: 10px;
   --ij-comp-sheet-radius: 24px;
}

.dark {
   --ij-elevation-card: 0px 4px 12px 0px rgb(0 0 0 / 0.4);
   --ij-elevation-sheet: 0px -4px 24px 0px rgb(0 0 0 / 0.4);
   --ij-elevation-floating: 0px 6px 16px 0px rgb(0 0 0 / 0.4);
   --ij-color-bg-canvas: #0e1413;
   --ij-color-bg-surface: #161e1d;
   --ij-color-bg-surface-variant: #1f2a29;
   --ij-color-text-primary: #f2f5f4;
   --ij-color-text-secondary: #a7b4b3;
   --ij-color-text-disabled: #536564;
   --ij-color-text-on-action: #06201f;
   --ij-color-action-primary: #3fbfb9;
   --ij-color-action-primary-hover: #6ed4ce;
   --ij-color-action-primary-tint: rgb(63 191 185 / 0.2);
   --ij-color-accent-gold: #d8b24a;
   --ij-color-border-default: #2e3a39;
   --ij-color-border-strong: #788c8b;
   --ij-color-border-focus: #3fbfb9;
   --ij-color-status-success-fg: #4cc85b;
   --ij-color-status-success-bg: #14301a;
   --ij-color-status-warning-fg: #ffb74d;
   --ij-color-status-warning-bg: #3a2a12;
   --ij-color-status-danger-fg: #f07167;
   --ij-color-status-danger-bg: #3a1614;
   --ij-color-status-info-fg: #64b6d6;
   --ij-color-status-info-bg: #142832;
   --ij-color-overlay-shadow: rgb(0 0 0 / 0.4);
   --ij-color-overlay-scrim: rgb(0 0 0 / 0.71);
   --ij-comp-field-fill: #1f2a29;
}