/*
 * BelQalam "Calm Academic" design tokens.
 * Exported from the Figma file "ILMS Redesign" (ShJHhr4FYAJZsQqu8q8HGv), collections Color + Dimension.
 * Names match each Figma variable's WEB code syntax, so Dev Mode shows the same names.
 *
 * Direction: build with logical properties (margin-inline-start, padding-inline-end,
 * inset-inline-start, text-align: start) so one stylesheet serves <html dir="rtl"> and dir="ltr".
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

/*
 * Cairo's (and Readex Pro's) Arabic-Indic digits sit tight, so pairs like ٢٢ / ٣٣ touch and read as
 * one glyph (Readex Pro checked in Chrome: no OpenType feature fixes it),
 * so digits U+0660-0669 come from a system Arabic face instead; letters stay Cairo.
 */
@font-face {
  font-family: "BQ Arabic Digits";
  src: local("Tahoma"), local("Geeza Pro"), local("Segoe UI"), local("Noto Sans Arabic"), local("Noto Naskh Arabic");
  unicode-range: U+0660-0669;
}

/* The Saudi riyal sign (U+20C1, 2025) is in almost no system font yet: this face draws only that character
   (font: @emran-alhaddad/saudi-riyal-font, OFL-1.1, static/fonts/saudi-riyal/LICENSE.txt). */
@font-face {
  font-family: "BQ Riyal";
  src: url("/static/fonts/saudi-riyal/saudi-riyal-f5c837ca9f71c0482f1457b7f4b087e0.woff2") format("woff2"), url("/static/fonts/saudi-riyal/saudi-riyal-5e0daea20ed46cf31bf6790d91cfbacf.woff") format("woff");
  font-weight: 100 599;
  font-display: swap;
  unicode-range: U+20C1;
}
@font-face {
  font-family: "BQ Riyal";
  src: url("/static/fonts/saudi-riyal/saudi-riyal-bold-beafaab6005092cb44ee8533467e2704.woff2") format("woff2"), url("/static/fonts/saudi-riyal/saudi-riyal-bold-1459da48a92213f4131e6fd60993014c.woff") format("woff");
  font-weight: 600 900;
  font-display: swap;
  unicode-range: U+20C1;
}

:root {
  /* Color — Light */
  --color-bg-canvas: #F1F5F4;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F8FAFC;
  --color-bg-muted: #F1F5F9;
  --color-border-default: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-text-primary: #0F172A;
  --color-text-secondary: #64748B;
  --color-text-disabled: #94A3B8;
  --color-text-on-primary: #FFFFFF;
  --color-primary-default: #0F766E;
  --color-primary-hover: #115E59;
  --color-primary-soft: #CCFBF1;
  --color-primary-ink: #115E59;
  --color-accent-default: #D97706;
  --color-accent-soft: #FEF3C7;
  --color-accent-ink: #92400E;
  --color-success-default: #15803D;
  --color-success-soft: #DCFCE7;
  --color-danger-default: #B91C1C;
  --color-danger-soft: #FEE2E2;
  --color-warning-default: #B45309;
  --color-warning-soft: #FEF3C7;
  --color-info-default: #1D4ED8;
  --color-info-soft: #DBEAFE;
  --color-focus-ring: #14B8A6;

  /* Space */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 41, 0.05);
  --shadow-md: 0 1px 2px 0 rgba(15, 23, 41, 0.04), 0 2px 8px 0 rgba(15, 23, 41, 0.06);
  --shadow-lg: 0 4px 8px 0 rgba(15, 23, 41, 0.05), 0 12px 32px 0 rgba(15, 23, 41, 0.10);

  /* Type — Cairo covers Arabic and Latin */
  --font-family-base: "BQ Riyal", "BQ Arabic Digits", 'Cairo', system-ui, sans-serif;
  --font-display: 700 40px/1.30 var(--font-family-base);
  --font-h1: 700 32px/1.35 var(--font-family-base);
  --font-h2: 600 26px/1.40 var(--font-family-base);
  --font-h3: 600 20px/1.45 var(--font-family-base);
  --font-title: 600 17px/1.50 var(--font-family-base);
  --font-body: 400 15px/1.65 var(--font-family-base);
  --font-body-strong: 500 15px/1.65 var(--font-family-base);
  --font-body-small: 400 13px/1.60 var(--font-family-base);
  --font-label: 600 13px/1.40 var(--font-family-base);
  --font-caption: 500 12px/1.40 var(--font-family-base);
  --font-numeric-stat: 700 34px/1.20 var(--font-family-base);

  /* Navigation — deep tinted sidebar (Figma page "38 · Nav colour exploration", option A) */
  --color-nav-bg: #042F2E;                       /* teal/950 */
  --color-nav-border: rgba(255, 255, 255, 0.08);
  --color-nav-text: rgba(255, 255, 255, 0.80);
  --color-nav-text-strong: #FFFFFF;
  --color-nav-text-muted: rgba(255, 255, 255, 0.60);
  --color-nav-icon: rgba(94, 234, 212, 0.75);    /* teal/300 */
  --color-nav-label: rgba(94, 234, 212, 0.65);
  --color-nav-hover-bg: rgba(255, 255, 255, 0.05);
  --color-nav-active-bg: rgba(255, 255, 255, 0.08);
  --color-nav-active-bar: #FBBF24;               /* amber/400 — the logo's pen tip */
  --color-nav-surface: rgba(255, 255, 255, 0.06);
  --color-nav-pill: rgba(255, 255, 255, 0.12);
  --color-nav-avatar-bg: #0F766E;                /* teal/700 */
  --color-nav-brand-plate: #FFFFFF;              /* uploaded academy logos keep their own colours */
}

/* Color — Dark (opt in with data-theme="dark" on <html>) */
:root[data-theme="dark"] {
  --color-bg-canvas: #0A1413;
  --color-bg-surface: #111D1C;
  --color-bg-subtle: #182726;
  --color-bg-muted: #182726;
  --color-border-default: #243634;
  --color-border-strong: #475569;
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-disabled: #475569;
  --color-text-on-primary: #042F2E;
  --color-primary-default: #2DD4BF;
  --color-primary-hover: #5EEAD4;
  --color-primary-soft: #042F2E;
  --color-primary-ink: #99F6E4;
  --color-accent-default: #FBBF24;
  --color-accent-soft: #451A03;
  --color-accent-ink: #FDE68A;
  --color-success-default: #4ADE80;
  --color-success-soft: #052E16;
  --color-danger-default: #F87171;
  --color-danger-soft: #450A0A;
  --color-warning-default: #FBBF24;
  --color-warning-soft: #451A03;
  --color-info-default: #60A5FA;
  --color-info-soft: #172554;
  --color-nav-bg: #061211;
}

/*
 * Directions B and C from Figma page "01 · Directions" (tiles 5:2 and 6:2), user-selectable via
 * static/js/design-direction.js (data-direction on <html>; A Calm Academic is the default above).
 * Tile hexes are used as-is; hover/ink/strong/disabled/focus shades are not on the tiles and
 * come from the same Tailwind scales the tiles use.
 */
:root[data-direction="bright"] {
  --color-bg-canvas: #F4F7FE;
  --color-bg-subtle: #F8FAFC;
  --color-bg-muted: #F1F5F9;
  --color-border-default: #E2E8F0;
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;
  --color-primary-default: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-soft: #DBEAFE;
  --color-primary-ink: #1E40AF;
  --color-accent-default: #F97316;
  --color-accent-soft: #FFEDD5;
  --color-accent-ink: #C2410C;
  --color-success-default: #16A34A;
  --color-danger-default: #DC2626;
  --color-warning-default: #C2410C;
  --color-warning-soft: #FFEDD5;
  --color-info-default: #0369A1;
  --color-info-soft: #E0F2FE;
  --color-focus-ring: #60A5FA;

  /* rounder: cards 16 on the tile */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --color-nav-bg: #172554;                       /* blue/950 */
  --color-nav-icon: rgba(147, 197, 253, 0.75);   /* blue/300 */
  --color-nav-label: rgba(147, 197, 253, 0.65);
  --color-nav-active-bar: #FB923C;               /* orange/400 */
  --color-nav-avatar-bg: #1D4ED8;
  /* font stays Cairo (the only face loaded) */
}

:root[data-direction="neutral"] {
  --color-bg-canvas: #F9FAFB;
  --color-bg-subtle: #F9FAFB;
  --color-bg-muted: #F3F4F6;
  --color-border-default: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-disabled: #9CA3AF;
  --color-primary-default: #4338CA;
  --color-primary-hover: #3730A3;
  --color-primary-soft: #E0E7FF;
  --color-primary-ink: #3730A3;
  /* the tile's accent is ink, not a hue */
  --color-accent-default: #111827;
  --color-accent-soft: #F3F4F6;
  --color-accent-ink: #111827;
  --color-success-default: #047857;
  --color-success-soft: #D1FAE5;
  --color-danger-default: #B91C1C;
  --color-warning-default: #A16207;
  --color-warning-soft: #FEF9C3;
  --color-focus-ring: #818CF8;

  /* tighter corners (6 / 8 on the tile), flatter surfaces that lean on borders */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --shadow-sm: none;
  --shadow-md: 0 1px 2px 0 rgba(17, 24, 39, 0.05);
  --shadow-lg: 0 8px 24px 0 rgba(17, 24, 39, 0.08);

  --color-nav-bg: #1E1B4B;                       /* indigo/950 */
  --color-nav-icon: rgba(165, 180, 252, 0.75);   /* indigo/300 */
  --color-nav-label: rgba(165, 180, 252, 0.65);
  --color-nav-active-bar: #FBBF24;               /* amber/400 */
  --color-nav-avatar-bg: #4338CA;
  /* font stays Cairo (the only face loaded) */
}

/* Tabular figures for numbers that line up in columns (tables, stat tiles, rankings). */
.ds-num {
  font-variant-numeric: tabular-nums;
}