/* * 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 and dir="ltr". */ @import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700&display=swap'); /* * Readex Pro's Arabic-Indic digits have no side-bearing, so pairs like ٢٦ touch and read as * one glyph ("٢٠٢٦" looks like "٢٠٦"). No OpenType feature toggles it off (verified in Chrome), * so digits U+0660-0669 come from a system Arabic face instead; letters stay Readex Pro. */ @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; } :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 — Readex Pro covers Arabic and Latin */ --font-family-base: "BQ Arabic Digits", 'Readex Pro', 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); } /* Color — Dark (opt in with data-theme="dark" on ) */ :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; } /* Tabular figures for numbers that line up in columns (tables, stat tiles, rankings). */ .ds-num { font-variant-numeric: tabular-nums; }