/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS SYSTEM
   Single Source of Truth for all CSS Custom Properties
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── 1. PRIMITIVE COLORS ─── */
    --gray-900: #0A0A0A;
    --gray-850: #141414;
    --gray-800: #1A1A1A;
    --gray-750: #1F1F1F;
    --gray-700: #252525;
    --gray-600: #2F2F2F;
    --gray-400: #707070;
    --gray-300: #A0A0A0;
    --gray-50:  #FAFAFA;

    --blue-50:  #eef4fb;
    --blue-100: #d5e6f5;
    --blue-200: #aacceb;
    --blue-300: #74a8da;
    --blue-400: #4a8fd4;
    --blue-500: #1B6BC4;
    --blue-600: #14519A;
    --blue-700: #0e3b72;

    --cyan-500: #0E7FA8;
    --green-500: #14785A;
    --amber-500: #C47A00;
    --amber-warning: #F29100;
    --red-500: #C8202A;
    --red-critical: #D93025;
    --purple-500: #6B46C1;

    /* ─── 2. SEMANTIC COLORS (Dark Theme Default) ─── */
    --bg-base: var(--gray-900);
    --bg-surface: var(--gray-850);
    --bg-elevated: var(--gray-850);
    --bg-overlay: var(--gray-800);
    --bg-interactive: var(--gray-750);

    --depth-00: var(--bg-base);
    --depth-05: var(--bg-base);
    --depth-10: var(--bg-elevated);
    --depth-15: var(--bg-overlay);
    --depth-20: var(--bg-interactive);
    --depth-25: var(--gray-700);
    --depth-30: var(--gray-600);

    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-disabled: #4A4A4A;
    --text-muted: #52525b;

    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* Core Branding */
    --primary-50: var(--blue-50);
    --primary-100: var(--blue-100);
    --primary-200: var(--blue-200);
    --primary-300: var(--blue-300);
    --primary-400: var(--blue-400);
    --primary-500: var(--blue-500);
    --primary-600: var(--blue-600);
    --primary-700: var(--blue-700);
    
    --accent: var(--blue-500);
    --accent-light: var(--blue-400);
    --accent-dark: var(--blue-600);
    --accent-soft: rgba(27, 107, 196, 0.10);

    /* Strict Clinical Semantic Palette */
    --sem-critical: var(--red-critical);
    --sem-warning: var(--amber-warning);
    --sem-stable: var(--green-500);
    --sem-info: var(--blue-500);

    --success: var(--green-500);
    --success-soft: rgba(20, 120, 90, 0.10);
    --warning: var(--amber-500);
    --warning-soft: rgba(196, 122, 0, 0.10);
    --danger: var(--red-500);
    --danger-soft: rgba(200, 32, 42, 0.10);
    --info: var(--cyan-500);
    --info-soft: rgba(8, 145, 178, 0.10);   /* completes the soft set: success/warning/danger/info */
    --purple: var(--purple-500);

    --gradient-primary: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
    --gradient-accent: linear-gradient(135deg, var(--blue-500) 0%, var(--cyan-500) 100%);
    --gradient-surface: linear-gradient(180deg, var(--depth-15) 0%, var(--depth-10) 100%);

    /* Specialty Colors / Modes */
    --mode-practice-accent: #1B6BC4; /* Clinical Royal Blue */
    --mode-practice-surface: #071019;
    --mode-emergency-accent: #C8202A; /* Crimson Red */
    --mode-emergency-surface: #0A0000;
    --mode-story-accent: #7C5CBF; /* Royal Violet */
    --mode-story-surface: #0A080F;
    --mode-lab-accent: #14785A; /* Emerald Green */
    --mode-lab-surface: #060D0A;
    --mode-surgery-accent: #0D9488; /* Surgical Scrub Teal */
    --mode-surgery-surface: #040D0C;
    --mode-usmle-accent: #D97706; /* NBME Gold */
    --mode-usmle-surface: #0E0A06;
    --mode-rpg-accent: #3D7AB5; /* Career Cobalt */
    --mode-rpg-surface: #060A10;
    --mode-ai-patient-accent: #06B6D4; /* Conversational Cyan */
    --mode-ai-patient-surface: #040D10;
    --mode-forensic-accent: #64748B; /* Cold Slate Steel / Charcoal */
    --mode-forensic-surface: #0A0D10;

    --cardiology: #B91C27;
    --neurology: #6B46C1;
    --emergency: var(--mode-emergency-accent);
    --surgery: var(--mode-surgery-accent);
    --pediatrics: #A03070;
    --internal: #14785A;

    /* ─── 3. TYPOGRAPHY ─── */
    --font-sans: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-arabic: 'IBM Plex Sans Arabic', 'DM Sans', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

    --text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
    --text-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
    --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
    --text-xl: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.375rem + 0.75vw, 2rem);
    --text-3xl: clamp(2rem, 1.75rem + 1vw, 3rem);
    --text-4xl: clamp(2.5rem, 2rem + 2vw, 4rem);
    --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;

    /* ─── 3.1 BILINGUAL TYPOGRAPHY TOKENS (ARABIC / RTL) ─── */
    --font-en: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ar: 'IBM Plex Sans Arabic', 'DM Sans', 'Segoe UI', sans-serif;
}

html[lang="ar"],
[dir="rtl"] {
    --font-sans: var(--font-ar, 'IBM Plex Sans Arabic', 'DM Sans', sans-serif);
    --leading-normal: 1.65;
    --leading-snug: 1.45;
    --leading-tight: 1.3;
    --leading-relaxed: 1.8;
    --tracking-tight: 0em;
    --tracking-normal: 0em;
    --tracking-wide: 0em;
    --tracking-wider: 0.02em;
}

:root {
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ─── 5. BORDER RADIUS ─── */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 10px;
    --radius-3xl: 12px;
    --radius-full: 9999px;

    /* ─── 6. SHADOWS & ELEVATION ─── */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12);

    --shadow-0: var(--shadow-none);
    --shadow-1: var(--shadow-sm);
    --shadow-2: var(--shadow-md);
    --shadow-3: var(--shadow-lg);
    --shadow-4: var(--shadow-xl);
    --shadow-5: var(--shadow-2xl);
    --shadow-6: var(--shadow-2xl);

    --glow-primary: none;
    --glow-success: none;
    --glow-danger: none;

    /* ─── 7. ANIMATION & TIMING ─── */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-magnetic: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --duration-dramatic: 800ms;

    /* ─── 8. Z-INDEX ─── */
    --z-below: -1;
    --z-base: 0;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-max: 9999;

    /* ─── 9. GLASSMORPHISM ─── */
    --glass-bg: rgba(18, 18, 26, 0.85);
    --glass-blur: blur(12px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);

    /* ─── 10. LAYOUT ─── */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    --header-height: 64px;
    --nav-height: 56px;

    /* ─── Mobile Ergonomics & Safe Areas ─── */
    --touch-target-min: 44px;
    --touch-target-comfort: 48px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --bottom-nav-height: calc(56px + var(--safe-area-bottom));
    --header-height-mobile: calc(56px + var(--safe-area-top));
    --font-arabic: 'Cairo', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
    --leading-arabic-normal: 1.6;

    /* ─── 11. CLINICAL MONITOR REALISM (DARK-ZONE PRESERVED) ─── */
    --monitor-bg: #090D16;
    --monitor-surface: #0E1424;
    --monitor-border: #1E293B;
    --monitor-text: #F8FAFC;
    --monitor-text-dim: #94A3B8;
    --monitor-grid: rgba(51, 65, 85, 0.35);
    --monitor-trace: #10B981;
    --monitor-trace-warn: #F59E0B;
    --monitor-trace-crit: #EF4444;
}

/* ─── LIGHT THEME (High Contrast) ─── */
html.light, [data-theme="light"] {
    --bg-base: #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F7F7F7;
    --bg-overlay: #F0F0F0;
    --bg-interactive: #E8E8E8;

    --depth-00: #ffffff;
    --depth-05: #ffffff;
    --depth-10: #f8fafc;
    --depth-15: #f1f5f9;
    --depth-20: #e2e8f0;
    --depth-25: #cbd5e1;
    --depth-30: #94a3b8;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-disabled: #D4D4D4;
    --text-muted: #94a3b8;

    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-default: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);

    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-blur: blur(8px);

    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
    --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 2px rgba(0, 0, 0, 0.05);
    --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-5: 0 16px 48px rgba(0, 0, 0, 0.15);

    /* ─── CLINICAL MONITOR (Light Mode Adaptive) ─── */
    --monitor-bg: #f8fafc;
    --monitor-surface: #ffffff;
    --monitor-border: #e2e8f0;
    --monitor-text: #0f172a;
    --monitor-text-dim: #64748b;
    --monitor-grid: rgba(148, 163, 184, 0.28);
    --monitor-trace: #059669;
    --monitor-trace-warn: #d97706;
    --monitor-trace-crit: #dc2626;
}

/* ─── SCOPED CLINICAL MONITOR DARK-ZONE PARITY (P1-1) ─── */
/* In light mode, clinical telemetry canvases remain on their realistic dark console backgrounds */
html.light .emergency-monitor-widget #em-ecg-canvas,
[data-theme="light"] .emergency-monitor-widget #em-ecg-canvas,
html.light .vitals-monitor-canvas,
[data-theme="light"] .vitals-monitor-canvas,
html.light .anesthesia-monitor-bar,
[data-theme="light"] .anesthesia-monitor-bar,
html.light .surgery-anesthesia-bar,
[data-theme="light"] .surgery-anesthesia-bar,
html.light .surgical-telemetry-canvas,
[data-theme="light"] .surgical-telemetry-canvas {
    background: var(--monitor-bg) !important;
    color: var(--monitor-text) !important;
    border-color: var(--monitor-border) !important;
}