/**
 * Jeem Academy public design tokens — the single source for colour, type, spacing, radius, shadow and motion.
 * Load first; every other public stylesheet uses these variables instead of raw values.
 *
 * Breakpoints (CSS variables cannot be used inside @media, so these are the agreed widths):
 *   sm 576px · md 768px · lg 992px · xl 1200px
 */
:root {
    /* Colour — brand */
    --color-primary: #37BD8A;
    --color-primary-hover: #2fa175;
    --color-primary-soft: rgba(55, 189, 138, 0.12);
    --color-on-primary: #04140d;

    /* Colour — surfaces (dark theme) */
    --color-bg: #000000;
    --color-surface: #0a0a0a;
    --color-surface-raised: #141414;
    --color-surface-glass: rgba(25, 25, 25, 0.6);

    /* Colour — text */
    --color-text: #ffffff;
    --color-text-secondary: #a1a1aa;
    --color-text-muted: #8b8b94; /* WCAG AA for small text on the dark surfaces */

    /* Colour — lines */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-border-accent: rgba(55, 189, 138, 0.3);

    /* Colour — status */
    --color-success: #34d399;
    --color-success-soft: rgba(52, 211, 153, 0.12);
    --color-warning: #fbbf24;
    --color-warning-soft: rgba(251, 191, 36, 0.12);
    --color-error: #f87171;
    --color-error-soft: rgba(248, 113, 113, 0.12);
    --color-focus: #6ee7b7;

    /* Type */
    --font-ui: 'Work Sans', 'Mehr Nastaliq', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Urdu letters fall through to Mehr Nastaliq */
    --font-urdu: 'Mehr Nastaliq', 'Noto Nastaliq Urdu', 'Work Sans', serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --fs-xs: 0.75rem;      /* 12 */
    --fs-sm: 0.8125rem;    /* 13 */
    --fs-md: 0.875rem;     /* 14 */
    --fs-base: 0.9375rem;  /* 15 */
    --fs-lg: 1rem;         /* 16 */
    --fs-xl: 1.125rem;     /* 18 */
    --fs-2xl: 1.25rem;     /* 20 */
    --fs-3xl: 1.5rem;      /* 24 */
    --fs-4xl: 2rem;        /* 32 */
    --fs-5xl: 2.5rem;      /* 40 */
    --fs-display: clamp(2.25rem, 5vw, 3.5rem);
    --lh-tight: 1.2;
    --lh-base: 1.6;
    --lh-urdu: 2.1;        /* Nastaliq needs tall lines */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing (4px steps) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-section: clamp(3rem, 7vw, 4.5rem);
    --gutter: 16px;

    /* Layout */
    --container-max: 1320px;
    --container-narrow: 960px;
    --container-text: 720px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /* Elevation */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-brand: 0 8px 20px rgba(55, 189, 138, 0.2);

    /* Motion */
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --duration: 0.25s;
    --transition: all var(--duration) var(--ease);

    /* Layers */
    --z-header: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
}

@media (min-width: 768px) {
    :root { --gutter: 24px; }
}