:root {
    color-scheme: light;
    --bg: hsl(0, 0%, 100%);
    --bg-elevated: hsla(0, 0%, 100%, 0.8);
    --bg-elevated-strong: hsl(0, 0%, 100%);
    --surface: hsl(0, 0%, 100%);
    --surface-2: hsl(0, 0%, 96.1%);
    --text: hsl(0, 0%, 9%);
    --text-muted: hsl(0, 0%, 45.1%);
    --border: hsl(0, 0%, 89.8%);
    --border-active: hsl(0, 0%, 9%);
    --brand: hsl(221.2, 83.2%, 53.3%);
    --brand-2: hsl(217.2, 91.2%, 59.8%);
    --brand-3: hsl(199, 89%, 48%);
    --brand-glow: rgba(37, 99, 235, 0.04);
    --danger: hsl(0, 84.2%, 60.2%);
    --success: hsl(142.1, 76.2%, 36.3%);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.1);
    --radius-xl: 14px;
    --radius-lg: 10px;
    --radius-md: 8px;
    --radius-sm: 4px;
    --radius-round: 9999px;
    --transition: 150ms cubic-bezier(.16, 1, .3, 1);

    /* ── Typography Tokens ── */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', 'Tajawal', system-ui, sans-serif;
    --font-arabic: 'Tajawal', 'Inter', system-ui, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* ── Spacing Tokens (4px base) ── */
    --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;

    /* ── Z-Index Tokens ── */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-toast: 1080;
    --z-tooltip: 1090;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --bg: hsl(0, 0%, 0%);
    --bg-elevated: hsla(0, 0%, 4%, 0.7);
    --bg-elevated-strong: hsl(0, 0%, 4%);
    --surface: hsl(0, 0%, 2%);
    --surface-2: hsl(0, 0%, 7%);
    --text: hsl(0, 0%, 100%);
    --text-muted: hsl(0, 0%, 63.9%);
    --border: hsl(0, 0%, 14.9%);
    --border-active: hsl(0, 0%, 100%);
    --brand: hsl(217.2, 91.2%, 59.8%);
    --brand-2: hsl(221.2, 83.2%, 53.3%);
    --brand-3: hsl(199, 89%, 48%);
    --brand-glow: rgba(59, 130, 246, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.9);
}