/**
* assets/css/variables.css
* Site-wide design tokens (colors, type, spacing, radius, shadows,
* transitions) consumed via var(--token-name) throughout components.css
* and every admin/public page. Load this BEFORE components.css — every
* in the project already does:
*
*
*
* Palette: warm, calm teal-green (fits a Quran & Arabic learning center)
* on a soft off-white background. Fonts use a system stack only — no
* external font request — so nothing breaks if a page loses network
* access to a font CDN; Segoe UI / Tahoma render Arabic text cleanly on
* Windows, and the rest of the stack covers macOS/Linux/mobile.
*/
:root {
/* ---- Color ---- */
--color-primary: #0F6E5C;
--color-primary-dark: #0B5347;
--color-primary-light: #E3F2EE;
--color-bg: #FAF9F6;
--color-surface: #FFFFFF;
--color-text: #1F2A24;
--color-text-muted: #667066;
--color-text-inverse: #FFFFFF;
--color-border: #E2E5E1;
--color-border-strong: #C7CDC6;
--color-danger: #D64545;
/* ---- Typography ---- */
--font-heading: "Segoe UI", Tahoma, Geneva, Arial, sans-serif;
--font-body: "Segoe UI", Tahoma, Geneva, Arial, sans-serif;
--fs-xs: 0.75rem; /* 12px */
--fs-sm: 0.875rem; /* 14px */
--fs-base: 1rem; /* 16px */
--fs-md: 1.125rem; /* 18px */
--fs-lg: 1.375rem; /* 22px */
--fs-xl: 1.75rem; /* 28px */
--fw-medium: 500;
--fw-semibold: 600;
--lh-tight: 1.25;
/* ---- Spacing (4px base scale) ---- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
/* ---- Radius ---- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-pill: 999px;
/* ---- Shadow ---- */
--shadow-sm: 0 1px 3px rgba(15, 30, 24, 0.08);
--shadow-lg: 0 12px 32px rgba(15, 30, 24, 0.14);
/* ---- Transition ---- */
--transition-fast: 120ms ease;
--transition-base: 220ms ease;
}