/* Central theme tokens. Brand system: #0044FF + light SaaS surfaces. */
:root {
    --primary: #0044FF;
    --primary-light: #3B82F6;
    --primary-soft: #DBEAFE;
    --background: #F8FAFC;
    --surface: #F8FAFC;
    --surface-elevated: #FFFFFF;
    --border: #E2E8F0;
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;
    --on-primary: #FFFFFF;
    --primary-gradient: linear-gradient(135deg, #0044FF 0%, #3B82F6 100%);
    --button-gradient: linear-gradient(135deg, #0044FF 0%, #2563EB 52%, #3B82F6 100%);
    --button-gradient-hover: linear-gradient(135deg, #0038D8 0%, #0044FF 48%, #60A5FA 100%);
    --button-shadow: 0 16px 34px rgba(0, 68, 255, .20);
    --button-shadow-hover: 0 20px 44px rgba(0, 68, 255, .26);
    --secondary-gradient: linear-gradient(135deg, #0044FF 0%, #60A5FA 50%, #FFFFFF 100%);
    --surface-gradient: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 58%, #DBEAFE 100%);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 8px 30px rgba(15, 23, 42, .05);
    --shadow-md: 0 18px 44px rgba(15, 23, 42, .08);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, .12);
    --shadow-primary: 0 16px 34px rgba(0, 68, 255, .18);
    --focus-ring: 0 0 0 4px rgba(0, 68, 255, .12);

    /* Backward-compatible aliases for legacy CSS. */
    --blue: var(--primary);
    --primary-color: var(--primary);
    --accent: var(--primary-light);
    --aqua: #60A5FA;
    --deep: var(--primary);
    --ink: var(--text-primary);
    --muted: var(--text-secondary);
    --line: var(--border);
    --soft: var(--primary-soft);
    --white: #FFFFFF;
    --radius: var(--radius-sm);
    --brand-gradient: var(--button-gradient);
    --shadow-blue: var(--shadow-primary);

    /* Source Brothers aliases used by previous stabilization passes. */
    --sb-primary: var(--primary);
    --sb-primary-hover: var(--primary-light);
    --sb-primary-light: var(--primary-light);
    --sb-primary-soft: var(--primary-soft);
    --sb-secondary: var(--text-primary);
    --sb-bg: var(--background);
    --sb-bg-soft: var(--surface);
    --sb-surface: var(--surface-elevated);
    --sb-surface-raised: var(--surface-elevated);
    --sb-border: var(--border);
    --sb-border-strong: color-mix(in srgb, var(--primary) 24%, var(--border));
    --sb-text: var(--text-primary);
    --sb-text-body: var(--text-primary);
    --sb-text-muted: var(--text-secondary);
    --sb-success: var(--success);
    --sb-warning: var(--warning);
    --sb-error: var(--danger);
    --sb-info: var(--info);
    --sb-on-primary: var(--on-primary);
    --sb-radius-sm: var(--radius-sm);
    --sb-radius-md: var(--radius-md);
    --sb-radius-lg: var(--radius-lg);
    --sb-space-1: var(--space-1);
    --sb-space-2: var(--space-2);
    --sb-space-3: var(--space-3);
    --sb-space-4: var(--space-4);
    --sb-space-5: var(--space-5);
    --sb-space-6: var(--space-6);
    --sb-space-8: var(--space-8);
    --sb-space-10: var(--space-10);
    --sb-shadow-sm: var(--shadow-sm);
    --sb-shadow-md: var(--shadow-md);
    --sb-shadow-primary: var(--shadow-primary);
    --sb-focus-ring: var(--focus-ring);
    --sb-color-blue: var(--primary);
    --sb-color-blue-deep: var(--primary);
    --sb-color-blue-soft: var(--primary-soft);
    --sb-color-blue-border: color-mix(in srgb, var(--primary) 18%, var(--border));
    --sb-surface-blue: var(--primary);
    --sb-surface-blue-gradient: var(--button-gradient);
    --sb-on-blue: var(--on-primary);
    --sb-surface-light: #FFFFFF;
    --sb-surface-light-soft: var(--surface);
    --sb-on-light: var(--text-primary);
    --sb-on-light-muted: var(--text-secondary);
    --sb-on-light-link: var(--primary);
}

html,
body {
    color: var(--text-primary);
    background: var(--background);
}

body {
    font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection {
    color: var(--on-primary);
    background: var(--primary);
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 45%, #FFFFFF);
    outline-offset: 3px;
}