/* ===========================================
   VARIABLES.CSS - Design Tokens & Theming
   ===========================================
   
   TABLE OF CONTENTS
   -----------------
   1. Web Fonts
   2. CSS Variables (Root)
   3. Dark Theme
   4. Page Theme Overrides
   
   =========================================== */

/* -------------------------------------------
   WEB FONTS
   ------------------------------------------- */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------
   CSS VARIABLES
   ------------------------------------------- */
:root {
    /* Typography - Font Families */
    --font-sans: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;

    /* Typography - Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.625rem;    /* Was 1.5rem - more punch */
    --text-3xl: 2.25rem;     /* Was 1.875rem - for hero moments */

    /* Typography - Line Heights */
    --leading-none: 1;
    --leading-tight: 1.15;   /* Was 1.25 - tighter headings */
    --leading-snug: 1.35;    /* Was 1.375 */
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Typography - Letter Spacing */
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Typography - Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* NHS Core Colors */
    --nhs-blue: #005EB8;
    --nhs-dark-blue: #003087;
    --nhs-light-blue: #41B6E6;
    --nhs-green: #007F3B;
    --nhs-dark-green: #005A29;
    --nhs-green-light: rgba(0, 127, 59, 0.08);
    --nhs-green-border: rgba(0, 127, 59, 0.2);
    --nhs-green-bright: #4ADE80;
    --nhs-warm-yellow: #FFB81C;
    --nhs-red: #DA291C;
    --steroid-alt-day: #0D9488;

    /* Steroid/Prednisolone Colors */
    --steroid-amber: #B54708;
    --steroid-amber-dark: #93370D;
    --steroid-amber-light: #FEF3E7;
    --steroid-amber-border: #F79009;

    /* GCAPS/Emerald Colors */
    --emerald-primary: #047857;
    --emerald-bright: #059669;
    --emerald-dark: #064E3B;
    --emerald-light: #ECFDF5;
    --emerald-border: #10B981;
    
    --das28-primary: #B8860B;
    --axspa-primary: #0891B2;
    
    /* BVAS Colors (Purple/Violet) */
    --bvas-purple: #7C3AED;
    --bvas-purple-dark: #5B21B6;
    --bvas-purple-light: rgba(124, 58, 237, 0.1);
    --bvas-purple-border: #8B5CF6;
    --bvas-persistent: #D97706;
    --bvas-persistent-bg: rgba(217, 119, 6, 0.18);
    --bvas-persistent-text: var(--risk-med-text);
    --bvas-new-worse: #DC2626;
    --bvas-new-worse-bg: rgba(220, 38, 38, 0.15);
    --bvas-new-worse-text: var(--risk-high-text);

    /* === DMARD Drug Color Palette === */
    /* Pharmaceutical Gemstone palette - mature, muted jewel tones */

    /* Methotrexate (MTX) - Celadon (grey-green, vintage ceramic) */
    --drug-mtx: #5B8F7A;
    --drug-mtx-dark: #457561;
    --drug-mtx-light: rgba(91, 143, 122, 0.10);
    --drug-mtx-glow: rgba(91, 143, 122, 0.35);

    /* Sulfasalazine (SSZ) - Rust (warm burnt sienna, tablet reference) */
    --drug-ssz: #C46843;
    --drug-ssz-dark: #A3522F;
    --drug-ssz-light: rgba(196, 104, 67, 0.10);
    --drug-ssz-glow: rgba(196, 104, 67, 0.35);

    /* Azathioprine (AZA) - Wisteria (muted grey-lavender) */
    --drug-aza: #8878A9;
    --drug-aza-dark: #6C5F8A;
    --drug-aza-light: rgba(136, 120, 169, 0.10);
    --drug-aza-glow: rgba(136, 120, 169, 0.35);

    /* Leflunomide (LEF) - Slate (cool blue-grey, pharmaceutical) */
    --drug-lef: #5C7A8A;
    --drug-lef-dark: #486270;
    --drug-lef-light: rgba(92, 122, 138, 0.10);
    --drug-lef-glow: rgba(92, 122, 138, 0.35);

    /* Mycophenolate (MMF) - Rosewood (sophisticated dusty rose) */
    --drug-mmf: #A86B6B;
    --drug-mmf-dark: #8A5454;
    --drug-mmf-light: rgba(168, 107, 107, 0.10);
    --drug-mmf-glow: rgba(168, 107, 107, 0.35);

    /* Ciclosporin (CIC) - Malachite (banded teal-green mineral) */
    --drug-cic: #4D8A86;
    --drug-cic-dark: #3D706D;
    --drug-cic-light: rgba(77, 138, 134, 0.10);
    --drug-cic-glow: rgba(77, 138, 134, 0.35);

    /* Tacrolimus (TAC) - Tiger's Eye (golden-brown chatoyant quartz) */
    --drug-tac: #9B8249;
    --drug-tac-dark: #7D6940;
    --drug-tac-light: rgba(155, 130, 73, 0.10);
    --drug-tac-glow: rgba(155, 130, 73, 0.35);

    /* Mercaptopurine (6MP) - Lapis Lazuli (dusty deep blue, ancient mineral) */
    --drug-6mp: #6B7AA3;
    --drug-6mp-dark: #556186;
    --drug-6mp-light: rgba(107, 122, 163, 0.10);
    --drug-6mp-glow: rgba(107, 122, 163, 0.35);

    /* Voclosporin (VCS) - Rhodolite Garnet (raspberry-burgundy, violet undertones) */
    --drug-vcs: #8B5A72;
    --drug-vcs-dark: #6F4759;
    --drug-vcs-light: rgba(139, 90, 114, 0.10);
    --drug-vcs-glow: rgba(139, 90, 114, 0.35);

    /* Drug selection illuminated edge - warm white like light striking a gem facet */
    /* Light mode: stronger contrast needed against light backgrounds */
    --drug-edge-glow: rgba(255, 255, 255, 0.95);
    --drug-edge-width: 5px;
    --drug-edge-inset: inset 10px 0 20px -6px rgba(0, 0, 0, 0.28);

    /* === BIOLOGICS PAGE COLORS (Pink/Rose - muted to match gemstone palette) === */
    --biologics-base: #B25D7C;
    --biologics-dark: #8A4860;
    --biologics-light: rgba(178, 93, 124, 0.08);
    --biologics-glow: rgba(178, 93, 124, 0.35);

    /* === UNIFIED ACTIVE COLOR SYSTEM ===
       Module CSS files override these via data-active-* attributes.
       Defaults to NHS Blue as neutral fallback. */
    --active-color: var(--nhs-blue);
    --active-dark: var(--nhs-dark-blue);
    --active-light: rgba(0, 94, 184, 0.08);
    --active-glow: rgba(0, 94, 184, 0.35);

    /* === ROUTE COLORS (SC/IV/PO) === */
    --route-sc: #0d9488;
    --route-sc-dark: #0a7a70;
    --route-sc-bg: rgba(13, 148, 136, 0.12);
    --route-sc-bg-strong: rgba(13, 148, 136, 0.2);
    --route-sc-border: #5eead4;
    --route-iv: #6366f1;
    --route-iv-dark: #4f46e5;
    --route-iv-bg: rgba(99, 102, 241, 0.12);
    --route-iv-bg-strong: rgba(99, 102, 241, 0.2);
    --route-iv-border: #a5b4fc;
    --route-po: #d97706;
    --route-po-bg: rgba(217, 119, 6, 0.10);

    /* Base UI Colors (Light Theme) */
    --bg-primary: #F8F9FA;       /* Warmer, less clinical (was #F0F4F5) */
    --bg-secondary: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-surface: #FAFBFC;       /* NEW: subtle surface variation */
    --text-primary: #1F2937;     /* Warmer gray (was #212B32) */
    --text-secondary: #6B7280;   /* More neutral (was #4C6272) */
    --text-muted: #9CA3AF;       /* Softer (was #768692) */
    --text-on-theme: #FFFFFF;
    --border-color: #E5E7EB;     /* Lighter, modern (was #D8DDE0) */
    --border-subtle: #F3F4F6;    /* NEW: for subtle dividers */
    --border-light: #E5E7EB;     /* FIX: was undefined */
    --accent-info: #F3F4F6;      /* Neutral gray (was #E8EDEE) */
    --accent-warning: #FFF4E3;
    --accent-warning-border: #FFB81C;
    --accent-danger: #FEF2F2;
    --accent-danger-border: #FECACA;
    --accent-danger-text: #991B1B;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(33, 43, 50, 0.05);
    --shadow-sm: 0 1px 3px rgba(33, 43, 50, 0.06),
                 0 1px 2px rgba(33, 43, 50, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(33, 43, 50, 0.07),
                 0 2px 4px -1px rgba(33, 43, 50, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(33, 43, 50, 0.08),
                 0 4px 6px -2px rgba(33, 43, 50, 0.04);
    --shadow-float: 0 20px 25px -5px rgba(33, 43, 50, 0.1),
                    0 10px 10px -5px rgba(33, 43, 50, 0.03);
    --shadow-inset: inset 0 1px 3px rgba(33, 43, 50, 0.08);

    /* Overlays & Utility */
    --overlay-white: rgba(255, 255, 255, 0.95);
    --overlay-white-subtle: rgba(255, 255, 255, 0.2);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-dark-subtle: rgba(0, 0, 0, 0.08);
    --border-print: #ddd;
    --focus-ring-nhs-green: 0 0 0 3px rgba(0, 123, 84, 0.15);
    
    /* Risk Colors (for GCAPS & DAS28) */
    --risk-low-bg: #ECFDF5;
    --risk-low-text: var(--emerald-bright);
    --risk-low-border: #10B981;
    --risk-med-bg: #FEF9E7;
    --risk-med-text: #D97706;
    --risk-med-border: #F59E0B;
    --risk-high-bg: #FEF2F2;
    --risk-high-text: #DC2626;
    --risk-high-border: #EF4444;
    --risk-remission-bg: #ECFDF5;
    --risk-remission-text: #047857;
    --risk-remission-border: #059669;

    /* Alt Button Colors (for GCAPS) */
    --alt-active-bg: #FEF2F2;
    --alt-active-text: #991B1B;
    --alt-active-border: #EF4444;
    
    /* Dimensions */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;               /* Full pill/capsule shape */
    --header-height: 61px;
    --header-height-mobile: 94px;        /* Mobile header: brand + nav pills (no score strip) */
    --header-height-mobile-with-strip: 130px; /* Mobile header + score strip (GCAPS/BVAS/AxSpA) */
    --header-height-mobile-compact: 52px; /* Mobile header when nav pills hidden (patient mode, no back button) */

    /* Spacing Scale */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* Layout Tiers */
    --layout-narrow: 680px;    /* Was 640px - slightly wider */
    --layout-medium: 900px;
    --layout-wide: 1200px;

    /* Active Page Theme (default to DMARD/blue) */
    --theme-primary: var(--nhs-blue);
    --theme-dark: var(--nhs-dark-blue);
    --theme-light: var(--accent-info);
    --theme-border: var(--nhs-blue);
    
    /* Animation Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Smoother deceleration */
    --ease-spring: cubic-bezier(0.37, 1.61, 0.58, 1);   /* Bouncy spring */
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    /* Animation Durations (sync with TIMING constants in data.js) */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --duration-entrance: 400ms;    /* Was 350ms - smoother */
    --duration-bounce: 500ms;      /* Was 400ms - more expressive */
    --duration-drawer: 300ms;      /* Was 250ms - smoother */
    --duration-pulse: 2s;
    --duration-breathing: 3s;

    /* Transition Presets */
    --transition-fast: var(--duration-fast) var(--ease-out-expo);
    --transition-base: var(--duration-base) var(--ease-out-expo);
    --transition-slow: var(--duration-slow) var(--ease-out-expo);
    --transition-bounce: var(--duration-bounce) var(--ease-out-back);
    --transition-entrance: var(--duration-entrance) var(--ease-out-expo);
    --transition-drawer: var(--duration-drawer) var(--ease-drawer);
}

/* -------------------------------------------
   DARK THEME
   ------------------------------------------- */
[data-theme="dark"] {
    --bg-primary: #1A1F23;
    --bg-secondary: #242A2F;
    --bg-elevated: #2D343A;
    --bg-floating: rgba(36, 42, 47, 0.95);
    --bg-surface: #242A2F;
    --text-primary: #F0F4F5;
    --text-secondary: #B8C4CB;
    --text-muted: #8A99A4;
    --border-color: #3D454C;
    --border-subtle: #2D343A;
    --border-light: #3D454C;
    --accent-info: #2D343A;
    --accent-warning: rgba(255,184,28,0.12);
    --accent-warning-light: rgba(255, 184, 28, 0.12);
    --accent-warning-dark: #E5C07B;
    --accent-danger: rgba(218, 41, 28, 0.15);
    --accent-danger-border: rgba(218, 41, 28, 0.3);
    --accent-danger-text: #F87171;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 
                 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 
                 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 
                 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 
                    0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.2);

    /* Overlays & Utility (Dark Mode) */
    --overlay-white-subtle: rgba(255, 255, 255, 0.1);
    --overlay-dark-subtle: rgba(0, 0, 0, 0.15);

    --steroid-amber-light: rgba(247, 144, 9, 0.15);
    --emerald-light: rgba(4, 120, 87, 0.15);
    --nhs-green-light: rgba(0, 127, 59, 0.15);
    --nhs-green-border: rgba(0, 127, 59, 0.3);

    --risk-low-bg: rgba(6, 95, 70, 0.25);
    --risk-low-text: #10B981;
    --risk-low-border: #10B981;
    --risk-med-bg: rgba(120, 53, 15, 0.25);
    --risk-med-text: #F59E0B;
    --risk-med-border: #F59E0B;
    --risk-high-bg: rgba(127, 29, 29, 0.25);
    --risk-high-text: #EF4444;
    --risk-high-border: #EF4444;
    --risk-remission-bg: rgba(6, 95, 70, 0.25);
    --risk-remission-text: #6EE7B7;
    --risk-remission-border: #059669;

    --alt-active-bg: rgba(127, 29, 29, 0.4);
    --alt-active-text: #FCA5A5;
    --alt-active-border: #7F1D1D;
    
    /* BVAS Dark Mode Overrides */
    --bvas-purple-light: rgba(124, 58, 237, 0.2);
    --bvas-persistent: #F59E0B;
    --bvas-persistent-bg: rgba(245, 158, 11, 0.3);
    --bvas-persistent-text: #FBBF24;
    --bvas-new-worse: #EF4444;
    --bvas-new-worse-bg: rgba(239, 68, 68, 0.3);
    --bvas-new-worse-text: #F87171;

    /* DMARD Drug Colors - Dark Mode (increased opacity for visibility) */
    --drug-mtx-light: rgba(91, 143, 122, 0.22);
    --drug-ssz-light: rgba(196, 104, 67, 0.18);
    --drug-aza-light: rgba(136, 120, 169, 0.22);
    --drug-lef-light: rgba(92, 122, 138, 0.22);
    --drug-mmf-light: rgba(168, 107, 107, 0.22);
    --drug-cic-light: rgba(77, 138, 134, 0.22);
    --drug-tac-light: rgba(155, 130, 73, 0.22);
    --drug-6mp-light: rgba(107, 122, 163, 0.22);
    --drug-vcs-light: rgba(139, 90, 114, 0.22);

    /* Drug edge - softer in dark mode where contrast is naturally better */
    --drug-edge-glow: rgba(255, 252, 248, 0.88);
    --drug-edge-inset: inset 8px 0 16px -6px rgba(0, 0, 0, 0.22);

    /* Route colors - brighter in dark mode for visibility */
    --route-sc: #2dd4bf;
    --route-sc-dark: #14b8a6;
    --route-sc-bg: rgba(13, 148, 136, 0.15);
    --route-sc-bg-strong: rgba(13, 148, 136, 0.25);
    --route-sc-border: rgba(45, 212, 191, 0.5);
    --route-iv: #a5b4fc;
    --route-iv-dark: #818cf8;
    --route-iv-bg: rgba(99, 102, 241, 0.15);
    --route-iv-bg-strong: rgba(99, 102, 241, 0.25);
    --route-iv-border: rgba(129, 140, 248, 0.5);
    --route-po: #fbbf24;
    --route-po-bg: rgba(217, 119, 6, 0.18);
}

/* -------------------------------------------
   PAGE THEME OVERRIDES
   ------------------------------------------- */
[data-page="dmard"] {
    --theme-primary: var(--nhs-blue);
    --theme-dark: var(--nhs-dark-blue);
    --theme-light: var(--accent-info);
    --theme-border: var(--nhs-blue);
}

[data-page="prednisolone"] {
    --theme-primary: var(--steroid-amber);
    --theme-dark: var(--steroid-amber-dark);
    --theme-light: var(--steroid-amber-light);
    --theme-border: var(--steroid-amber-border);
}

[data-page="gcaps"] {
    --theme-primary: var(--emerald-bright);
    --theme-dark: var(--emerald-primary);
    --theme-light: var(--emerald-light);
    --theme-border: var(--emerald-border);
}

[data-theme="dark"][data-page="gcaps"] {
    --theme-primary: var(--emerald-primary);
    --theme-dark: var(--emerald-dark);
}

[data-page="das28"] {
    --theme-primary: var(--das28-primary);
    --theme-dark: #8B6914;
    --theme-light: rgba(184, 134, 11, 0.1);
    --theme-border: #D4A017;
}

[data-theme="dark"][data-page="das28"] {
    --theme-light: rgba(184, 134, 11, 0.2);
}

[data-page="bvas"] {
    --theme-primary: var(--bvas-purple);
    --theme-dark: var(--bvas-purple-dark);
    --theme-light: var(--bvas-purple-light);
    --theme-border: var(--bvas-purple-border);
}

[data-page="axspa"] {
    --theme-primary: var(--axspa-primary);
    --theme-dark: #0E7490;
    --theme-light: rgba(8, 145, 178, 0.1);
    --theme-border: #22D3EE;
}

[data-theme="dark"][data-page="axspa"] {
    --theme-light: rgba(8, 145, 178, 0.2);
}

[data-page="biologics"] {
    --theme-primary: var(--biologics-base);
    --theme-dark: var(--biologics-dark);
    --theme-light: var(--biologics-light);
    --theme-border: var(--biologics-base);
}

[data-theme="dark"][data-page="biologics"] {
    --biologics-light: rgba(178, 93, 124, 0.18);
    --theme-light: rgba(178, 93, 124, 0.18);
}