/**
 * IT.SOS — Premium Solid Design Tokens
 */

:root {
    /* Brand Colors (Light Theme) */
    --primary: #1e40af;
    --primary-hover: #1e3a8a;
    --bg: #ffffff;
    --bg-surface: #f8fafc;
    --text: #0f172a;
    --text-muted: #475569;
    --border: #e2e8f0;
    --destructive: #b91c1c;
    --destructive-hover: #991b1b;

    /* MD3 compatibility variables */
    --md-sys-color-primary: var(--primary);
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-surface: var(--bg);
    --md-sys-color-surface-container: var(--bg-surface);
    --md-sys-color-surface-container-high: var(--bg-surface);
    --md-sys-color-on-surface: var(--text);
    --md-sys-color-on-surface-variant: var(--text-muted);
    --md-sys-color-outline: var(--border);
    --md-sys-color-outline-variant: var(--border);
    --md-sys-color-error: var(--destructive);

    /* Spacing scale (4px base) */
    --sos-space-0: 0;
    --sos-space-1: 0.25rem;
    --sos-space-2: 0.5rem;
    --sos-space-3: 0.75rem;
    --sos-space-4: 1rem;
    --sos-space-5: 1.25rem;
    --sos-space-6: 1.5rem;
    --sos-space-8: 2rem;
    --sos-space-10: 2.5rem;
    --sos-space-12: 3rem;

    /* Typography scale (Unified with Tajawal globally) */
    --sos-type-display-sm: 800 2.25rem/1.15 'Tajawal', sans-serif;
    --sos-type-headline-sm: 700 1.25rem/1.3 'Tajawal', sans-serif;
    --sos-type-title-md: 700 1rem/1.35 'Tajawal', sans-serif;
    --sos-type-body-md: 400 0.9375rem/1.45 'Tajawal', sans-serif;
    --sos-type-label-md: 500 0.8125rem/1.2 'Tajawal', sans-serif;

    /* Motion (standard transition parameters) */
    --sos-motion-duration-short1: 120ms;
    --sos-motion-duration-short2: 200ms;
    --sos-motion-duration-medium1: 280ms;
    --sos-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --sos-motion-easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

    /* Solid override to deprecate glassmorphism */
    --sos-glass-bg: var(--bg-surface);
    --sos-glass-border: var(--border);
    --sos-glass-blur: 0px;
}

[data-theme="dark"] {
    /* Brand Colors (Dark Theme) */
    --primary: #2547c4;
    --primary-hover: #1e40af;
    --bg: #0a0e1a;
    --bg-surface: #131827;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #1f2740;
    --destructive: #dc2626;
    --destructive-hover: #b91c1c;

    /* MD3 compatibility variables */
    --md-sys-color-primary: var(--primary);
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-surface: var(--bg);
    --md-sys-color-surface-container: var(--bg-surface);
    --md-sys-color-surface-container-high: var(--bg-surface);
    --md-sys-color-on-surface: var(--text);
    --md-sys-color-on-surface-variant: var(--text-muted);
    --md-sys-color-outline: var(--border);
    --md-sys-color-outline-variant: var(--border);
    --md-sys-color-error: var(--destructive);
    
    /* Solid override to deprecate glassmorphism */
    --sos-glass-bg: var(--bg-surface);
    --sos-glass-border: var(--border);
    --sos-glass-blur: 0px;
}

/* Bridges for the legacy variables and layout styling */
html[data-theme="light"],
html:not([data-theme="dark"]) {
    --bg-surface: #f8fafc;
}

html[data-theme="dark"] {
    --bg-surface: #131827;
}