/* ============================================================
   AURORA V2 — Arctic Wolves Design Tokens
   
   Design Direction:
   - Clean, professional dark dashboard
   - Navy-charcoal background hierarchy (NOT near-black)
   - Neutral white/gray text (NO blue/purple tint)
   - Purple brand accent reserved for interactive elements
   - No aurora gradient overlays on surfaces
   - Solid borders, no gradient border effects
   - WCAG AA compliant contrast ratios
   
   Version: Aurora V2.0
   ============================================================ */

:root {
    /* ──────────────────────────────────────────────────────────
       1. COLOR SYSTEM — Surfaces (Navy-charcoal hierarchy)
       Clean, professional dark backgrounds
       ────────────────────────────────────────────────────────── */
    
    /* Base backgrounds — navy-charcoal */
    --bg-base: #0f1117;
    --bg-surface-0: #0b0d14;
    --bg-surface-1: #12151e;
    --bg-surface-2: #181c28;
    --bg-surface-3: #1e2233;
    --bg-surface-4: #252a3a;
    --bg-surface-5: #2c3245;

    /* Glass surfaces — subtle transparency for elevation */
    --glass-xs: rgba(255, 255, 255, 0.02);
    --glass-subtle: rgba(255, 255, 255, 0.035);
    --glass-light: rgba(255, 255, 255, 0.05);
    --glass-medium: rgba(255, 255, 255, 0.08);
    --glass-strong: rgba(255, 255, 255, 0.12);
    --glass-heavy: rgba(255, 255, 255, 0.16);
    --glass-intense: rgba(255, 255, 255, 0.20);
    
    /* Glass with blur — for elevated surfaces */
    --glass-blur-sm: blur(12px) saturate(160%);
    --glass-blur-md: blur(20px) saturate(180%);
    --glass-blur-lg: blur(32px) saturate(200%);

    /* Tonal surfaces — overlay system */
    --tonal-hover: rgba(255, 255, 255, 0.04);
    --tonal-pressed: rgba(255, 255, 255, 0.07);
    --tonal-dragged: rgba(255, 255, 255, 0.10);
    --tonal-focus: rgba(255, 255, 255, 0.06);
    --tonal-selected: rgba(107, 70, 193, 0.12);

    /* ──────────────────────────────────────────────────────────
       2. COLOR SYSTEM — Content (Text Hierarchy)
       Neutral white/gray — NO blue/purple tint
       WCAG AA compliant against dark surfaces
       ────────────────────────────────────────────────────────── */
    
    /* Primary content — clean white */
    --text-primary: #f0f2f5;
    --text-white: #f0f2f5;
    
    /* Secondary content — neutral gray */
    --text-secondary: #a0a4b0;
    
    /* Tertiary content — for labels, captions */
    --text-tertiary: #6b7080;
    
    /* Disabled content */
    --text-disabled: #4a4e5a;
    
    /* Functional text */
    --text-link: #8B5CF6;
    --text-link-hover: #A78BFA;

    /* ──────────────────────────────────────────────────────────
       3. COLOR SYSTEM — Borders
       Subtle but visible separators
       ────────────────────────────────────────────────────────── */
    
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.20);
    --border-focus: #6B46C1;
    --border-input: rgba(255, 255, 255, 0.08);
    --border-input-focus: #7C5CD4;

    /* ──────────────────────────────────────────────────────────
       4. COLOR SYSTEM — Brand (Arctic Wolves Purple)
       Primary brand identity — deep purple
       ────────────────────────────────────────────────────────── */
    
    --primary: #6B46C1;
    --primary-hover: #7C5CD4;
    --primary-active: #5A3BA8;
    --primary-light: #8B5CF6;
    --primary-lighter: #A78BFA;
    --primary-dark: #5538A8;
    --primary-darker: #4A2F91;

    /* Primary tonal — Material 3 state layers */
    --primary-subtle: rgba(107, 70, 193, 0.10);
    --primary-hover-layer: rgba(107, 70, 193, 0.08);
    --primary-pressed-layer: rgba(107, 70, 193, 0.14);
    --primary-selected: rgba(107, 70, 193, 0.16);
    --primary-muted: rgba(107, 70, 193, 0.06);

    /* Accent — lighter purple for highlights */
    --accent: #8B5CF6;
    --accent-light: #A78BFA;
    --accent-subtle: rgba(139, 92, 246, 0.10);

    /* ──────────────────────────────────────────────────────────
       5. COLOR SYSTEM — Semantic Status Colors
       Material 3 tonal approach — muted on dark
       ────────────────────────────────────────────────────────── */
    
    /* Success */
    --success: #34D399;
    --success-hover: #2CC28A;
    --success-subtle: rgba(52, 211, 153, 0.10);
    --success-muted: rgba(52, 211, 153, 0.06);
    --success-text: #34D399;

    /* Warning */
    --warning: #FBBF24;
    --warning-hover: #F59E0B;
    --warning-subtle: rgba(251, 191, 36, 0.10);
    --warning-muted: rgba(251, 191, 36, 0.06);
    --warning-text: #FBBF24;

    /* Error / Danger */
    --error: #F87171;
    --error-hover: #EF4444;
    --error-subtle: rgba(248, 113, 113, 0.10);
    --error-muted: rgba(248, 113, 113, 0.06);
    --error-text: #F87171;

    /* Info */
    --info: #60A5FA;
    --info-hover: #3B82F6;
    --info-subtle: rgba(96, 165, 250, 0.10);
    --info-muted: rgba(96, 165, 250, 0.06);
    --info-text: #60A5FA;

    /* Orange (CTA accent) */
    --orange: #F97316;
    --orange-hover: #EA580C;
    --orange-subtle: rgba(249, 115, 22, 0.10);

    /* ──────────────────────────────────────────────────────────
       6. GRADIENTS — Brand accents (minimal, interactive only)
       ────────────────────────────────────────────────────────── */
    
    --aurora-gradient: linear-gradient(135deg, #6B46C1, #3B82F6, #8B5CF6);
    --aurora-gradient-subtle: linear-gradient(135deg, rgba(107, 70, 193, 0.25), rgba(59, 130, 246, 0.20), rgba(139, 92, 246, 0.25));
    --aurora-gradient-border: linear-gradient(135deg, rgba(107, 70, 193, 0.35), rgba(59, 130, 246, 0.20), rgba(139, 92, 246, 0.35));
    --aurora-gradient-bg: linear-gradient(180deg, #0f1117 0%, #12151e 50%, #181c28 100%);
    --aurora-sidebar-gradient: linear-gradient(180deg, rgba(107, 70, 193, 0.06) 0%, transparent 100%);
    --aurora-button-gradient: linear-gradient(135deg, #7C5CD4, #6B46C1, #5538A8);
    --aurora-button-gradient-hover: linear-gradient(135deg, #8B6CE0, #7C5CD4, #6B46C1);
    --aurora-button-gradient-active: linear-gradient(135deg, #6B46C1, #5538A8, #4A2F91);

    /* ──────────────────────────────────────────────────────────
       7. TYPOGRAPHY
       System font stack with Inter preference
       ────────────────────────────────────────────────────────── */
    
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Font sizes — modular scale (1.25 ratio) */
    --font-size-2xs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.12em;

    /* ──────────────────────────────────────────────────────────
       8. SPACING SCALE (4px base, 8px grid)
       Consistent spatial relationships
       ────────────────────────────────────────────────────────── */
    
    --space-0: 0;
    --space-0\.5: 2px;
    --space-1: 4px;
    --space-1\.5: 6px;
    --space-2: 8px;
    --space-2\.5: 10px;
    --space-3: 12px;
    --space-3\.5: 14px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ──────────────────────────────────────────────────────────
       9. BORDER RADIUS — Apple Capsule Geometry
       Concentric radii system
       ────────────────────────────────────────────────────────── */
    
    --radius-xs: 4px;      /* Tiny elements, chips */
    --radius-sm: 6px;      /* Small buttons, inputs */
    --radius-md: 8px;      /* Standard buttons, cards */
    --radius-lg: 12px;     /* Large cards, panels */
    --radius-xl: 16px;     /* Modals, elevated panels */
    --radius-2xl: 20px;    /* Feature cards, filter boxes */
    --radius-3xl: 24px;    /* Hero elements */
    --radius-full: 9999px; /* Capsule shape — primary buttons, pills, tabs */

    /* ──────────────────────────────────────────────────────────
       10. SHADOWS — Elevation System (Material 3 inspired)
       Neutral black, NO glow effects
       ────────────────────────────────────────────────────────── */
    
    /* Surface elevation — subtle depth */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.40), 0 8px 10px -6px rgba(0, 0, 0, 0.28);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.50);
    
    /* Component shadows */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.20);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
    --shadow-dropdown: 0 12px 36px rgba(0, 0, 0, 0.40);
    --shadow-primary: 0 4px 14px rgba(107, 70, 193, 0.25);
    --shadow-primary-hover: 0 6px 20px rgba(107, 70, 193, 0.35);

    /* ──────────────────────────────────────────────────────────
       11. TRANSITIONS & MOTION
       Apple-inspired fluid animations
       ────────────────────────────────────────────────────────── */
    
    /* Duration scale */
    --duration-instant: 80ms;
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-moderate: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;
    
    /* Shorthand durations */
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-theme: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Easing curves — Apple spring-like */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --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-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-fluid: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* ──────────────────────────────────────────────────────────
       12. LAYOUT CONSTANTS
       ────────────────────────────────────────────────────────── */
    
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --sidebar-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --header-height: 56px;
    --content-max-width: 1200px;
    --content-padding: 24px;

    /* ──────────────────────────────────────────────────────────
       13. Z-INDEX SCALE
       ────────────────────────────────────────────────────────── */
    
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;

    /* ──────────────────────────────────────────────────────────
       14. SCROLLBAR
       ────────────────────────────────────────────────────────── */
    
    --scrollbar-width: 6px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.14);

    /* ──────────────────────────────────────────────────────────
       15. BACKWARD COMPATIBILITY ALIASES
       Maps old token names to new system
       ────────────────────────────────────────────────────────── */
    
    /* Backgrounds */
    --bg: var(--bg-base);
    --bg-main: var(--bg-base);
    --bg-secondary: var(--bg-surface-1);
    --bg-card: var(--bg-surface-2);
    --bg-sidebar: var(--bg-surface-1);
    --bg-hover: var(--bg-surface-3);
    --bg-input: var(--bg-surface-1);
    --bg-overlay: rgba(0, 0, 0, 0.60);
    --bg-dark: var(--bg-surface-1);
    --bg-darker: var(--bg-base);
    
    /* Sidebar glass */
    --sidebar: var(--glass-light);
    
    /* Text */
    --text: var(--text-secondary);
    --text-color: var(--text-secondary);
    --text-light: var(--text-secondary);
    --text-near-white: var(--text-primary);
    --text-slate: var(--text-secondary);
    --text-slate-dark: var(--text-tertiary);
    
    /* Card */
    --card-bg: var(--bg-surface-2);
    --background: var(--bg-base);
    
    /* Primary shortcuts */
    --neon: #6B46C1;
    --danger: var(--error);
    --button-hover: var(--primary-light);
    --color-primary: var(--primary);
    --color-primary-hover: var(--primary-hover);
    --color-primary-active: var(--primary-active);
    --color-primary-subtle: var(--primary-subtle);
    --color-primary-muted: var(--primary-muted);
    
    /* Status shortcuts */
    --color-success: var(--success);
    --color-success-subtle: var(--success-subtle);
    --color-warning: var(--warning);
    --color-warning-subtle: var(--warning-subtle);
    --color-error: var(--error);
    --color-error-subtle: var(--error-subtle);
    --color-info: var(--info);
    --color-info-subtle: var(--info-subtle);
    
    /* Status text */
    --success-text: var(--success);
    --warning-text: var(--warning);
    --error-text: var(--error);
    --info-text: var(--info);

    /* Surface */
    --surface-glass: rgba(18, 21, 30, 0.85);
    --surface-elevated: var(--bg-surface-3);
    --surface-hover-row: rgba(107, 70, 193, 0.04);

    /* Interaction */
    --hover-bg: var(--tonal-hover);
    --active-bg: var(--tonal-pressed);
    --focus-ring: rgba(107, 70, 193, 0.50);

    /* Primary opacity utilities (backward compat) */
    --primary-5: var(--primary-muted);
    --primary-8: var(--primary-muted);
    --primary-10: var(--primary-subtle);
    --primary-15: var(--primary-subtle);
    --primary-20: var(--primary-selected);
    --primary-25: var(--primary-selected);
    --primary-30: rgba(107, 70, 193, 0.25);
    --primary-40: rgba(107, 70, 193, 0.35);
    --primary-50: rgba(107, 70, 193, 0.45);
    --primary-80: var(--primary);
    --primary-light-10: var(--accent-subtle);

    /* Status opacity utilities (backward compat) */
    --success-10: var(--success-subtle);
    --success-15: var(--success-subtle);
    --success-20: var(--success-subtle);
    --success-30: rgba(52, 211, 153, 0.25);
    --warning-5: var(--warning-subtle);
    --warning-10: var(--warning-subtle);
    --warning-15: var(--warning-subtle);
    --warning-20: var(--warning-subtle);
    --warning-25: var(--warning-subtle);
    --warning-30: rgba(251, 191, 36, 0.25);
    --error-10: var(--error-subtle);
    --error-15: var(--error-subtle);
    --error-20: var(--error-subtle);
    --error-25: var(--error-subtle);
    --error-30: rgba(248, 113, 113, 0.25);
    --error-40: rgba(248, 113, 113, 0.35);
    --info-10: var(--info-subtle);
    --info-15: var(--info-subtle);
    --info-20: var(--info-subtle);
    --info-30: rgba(96, 165, 250, 0.25);

    /* White/Black opacity utilities (backward compat) */
    --white-5: rgba(255, 255, 255, 0.035);
    --white-10: rgba(255, 255, 255, 0.055);
    --white-20: rgba(255, 255, 255, 0.08);
    --white-30: rgba(255, 255, 255, 0.11);
    --white-50: rgba(255, 255, 255, 0.14);
    --white-80: var(--text-primary);
    --black-5: rgba(0, 0, 0, 0.05);
    --black-10: rgba(0, 0, 0, 0.10);
    --black-15: rgba(0, 0, 0, 0.15);
    --black-20: rgba(0, 0, 0, 0.20);
    --black-30: rgba(0, 0, 0, 0.30);
    --black-50: rgba(0, 0, 0, 0.50);
    --black-75: rgba(0, 0, 0, 0.75);
    --black-80: rgba(0, 0, 0, 0.80);

    /* Purple gradient shortcuts */
    --purple-dark: #4A2F91;
    --purple-gradient: var(--aurora-gradient);

    /* ═══════════════════════════════════════════════════════
       ENHANCED ELEMENTS — Aurora V2 Design Tokens
       ═══════════════════════════════════════════════════════ */

    /* Enhanced Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary, #6B46C1), var(--primary-light, #8B5CF6));
    --gradient-primary-hover: linear-gradient(135deg, #8B6CE0, #7C5CD4, #6B46C1);
    --gradient-card-top: linear-gradient(90deg, var(--primary, #6B46C1), var(--primary-light, #8B5CF6));

    /* Enhanced Shadows */
    --glow-primary: 0 0 20px rgba(107, 70, 193, 0.15);
    --glow-primary-strong: 0 0 30px rgba(107, 70, 193, 0.25);
    --glow-primary-button: 0 4px 20px rgba(107, 70, 193, 0.35);
    --glow-primary-button-hover: 0 6px 25px rgba(107, 70, 193, 0.45);
    --shadow-tab-active: 0 2px 8px rgba(107, 70, 193, 0.20);
    --shadow-modal-glass: 0 24px 64px rgba(0, 0, 0, 0.50);

    /* Severity Colors */
    --severity-minor: #22c55e;
    --severity-moderate: #f59e0b;
    --severity-severe: #f97316;
    --severity-critical: #ef4444;

    /* Status Ring */
    --ring-online: #22c55e;
    --ring-offline: #6b7080;
    --ring-busy: #f59e0b;

    /* Gameplan subsystem */
    --gp-bg: var(--bg-base);
    --gp-card: var(--bg-surface-2);
    --gp-border: var(--border-subtle);
    --gp-primary: var(--primary);
    --gp-primary-light: var(--accent);
    --gp-text: var(--text-primary);
    --gp-text-dim: var(--text-secondary);
    --gp-text-muted: var(--text-tertiary);

    /* Tailwind Slate palette (legacy) */
    --slate-50: var(--text-primary);
    --slate-100: var(--text-primary);
    --slate-200: var(--text-primary);
    --slate-300: var(--text-secondary);
    --slate-400: var(--text-secondary);
    --slate-500: var(--text-tertiary);
    --slate-600: var(--text-tertiary);
    --slate-700: var(--border-medium);
    --slate-800: var(--bg-surface-2);
    --slate-900: var(--bg-surface-1);
    --slate-950: var(--bg-base);

    /* GitHub Dark palette (legacy) */
    --gh-dark: var(--bg-surface-1);
    --gh-darker: var(--bg-base);
    --gh-border: var(--border-subtle);
    --gh-card: var(--bg-surface-2);
    --gh-text: var(--text-primary);
    --gh-text-muted: var(--text-secondary);
}