/**
 * ============================================
 * TACVIO DESIGN SYSTEM - MASTER VARIABLES v3.0
 * ============================================
 * Dark Slate + Deep Gold + Light Mode Focus
 * "ALWAYS BE READY"
 * 
 * THIS IS THE SINGLE SOURCE OF TRUTH FOR ALL CSS VARIABLES
 * All other CSS files should NOT re-declare these variables
 * 
 * v3.0 Changes:
 * - New Deep Gold accent (#D4A012)
 * - New Dark Slate sidebar (#1E293B)
 * - Cooler gray backgrounds (from warm cream)
 * - New component tokens (floating headers, elevated cards)
 * - Simplified to light mode focus
 * ============================================
 */

 :root {
   /* ==========================================
      ACCENT COLORS - Deep Gold (Primary Action)
      ========================================== */
   
   --tacvio-accent: #D4A012;
   --tacvio-accent-hover: #B8890F;
   --tacvio-accent-bright: #E8B829;
   --tacvio-accent-light: #FEF9E7;
   --tacvio-accent-text: #8B6914;
   --tacvio-accent-glow: rgba(212, 160, 18, 0.3);
   --tacvio-accent-rgb: 212, 160, 18;
   --tacvio-accent-lighter: #FEF9E7;
   
   /* Accent Gradient - For CTAs and highlights */
   --tacvio-accent-gradient: linear-gradient(135deg, #D4A012 0%, #B8890F 100%);
   
   
   /* ==========================================
      SIDEBAR COLORS - Dark Slate
      ========================================== */
   
   --tacvio-sidebar-bg: #1E293B;
   --tacvio-sidebar-text: #FFFFFF;
   --tacvio-sidebar-text-hover: #D4A012;
   --tacvio-sidebar-active-bg: rgba(212, 160, 18, 0.15);
   --tacvio-sidebar-active-text: #D4A012;
   --tacvio-sidebar-divider: #334155;
   --tacvio-sidebar-logo: #FFFFFF;
   
   
   /* ==========================================
      PRIMARY COLORS - Dark Slate (Navigation)
      ========================================== */
   
   --tacvio-primary: #1E293B;
   --tacvio-primary-dark: #0F172A;
   --tacvio-primary-light: #334155;
   --tacvio-primary-lighter: #475569;
   
   /* Primary Gradient - For headers if needed */
   --tacvio-primary-gradient: linear-gradient(90deg, #334155 0%, #1E293B 50%, #0F172A 100%);
   
   
  /* ==========================================
      BACKGROUND COLORS - Warm Sand
      ========================================== */

 --tacvio-bg: #E5DFD5;
 --tacvio-bg-page: #E5DFD5;
   --tacvio-bg-alt: #DDD7CD;
   --tacvio-bg-white: #FFFFFF;
   --tacvio-bg-card: #FFFFFF;
   --tacvio-bg-elevated: #FFFFFF;
   --tacvio-bg-subtle: #F0EBE3;
   --tacvio-bg-light: var(--tacvio-bg);
   --tacvio-bg-input: #F5F2ED;
   --tacvio-bg-input-focus: #FFFFFF;
   --tacvio-input-bg: var(--tacvio-bg-input);  /* Alias for backward compatibility */
  --tacvio-bg-table-header: #F5F2ED;
  
  /* Warm Tint Backgrounds */
  --tacvio-bg-warm: #E5DFD5;
  --tacvio-bg-warm-light: #F0EBE3;
  --tacvio-bg-warm-subtle: #F7F4F0;
  --tacvio-border-warm: #D4CFC7;
  --tacvio-border-warm-light: #C9C4BC;
  
  
  /* ==========================================
      TEXT COLORS
      ========================================== */
   
   --tacvio-text: #111827;
   --tacvio-text-primary: #111827;
   --tacvio-text-secondary: #4B5563;
   --tacvio-text-muted: #9CA3AF;
   --tacvio-text-light: #D1D5DB;
   --tacvio-text-inverse: #FFFFFF;
   
   
   /* ==========================================
      BORDER COLORS
      ========================================== */
   
   --tacvio-border: #E5E7EB;
   --tacvio-border-light: #F3F4F6;
   --tacvio-border-dark: #D1D5DB;
   --tacvio-border-subtle: #E5E7EB;
   --tacvio-border-input: #D1D5DB;
   
   
   /* ==========================================
      STATUS / SEMANTIC COLORS
      ========================================== */
   
   /* Success - Green */
   --tacvio-success: #059669;
   --tacvio-success-dark: #047857;
   --tacvio-success-darker: #065F46;
   --tacvio-success-light: #D1FAE5;
   --tacvio-success-bg: #ECFDF5;
   --tacvio-success-border: rgba(5, 150, 105, 0.2);
   --tacvio-success-rgb: 5, 150, 105;
   
   /* Warning - Amber */
   --tacvio-warning: #D97706;
   --tacvio-warning-dark: #B45309;
   --tacvio-warning-light: #FEF3C7;
   --tacvio-warning-lighter: #FFF8E1;
   --tacvio-warning-bg: #FFFBEB;
   --tacvio-warning-border: rgba(217, 119, 6, 0.2);
   --tacvio-warning-rgb: 217, 119, 6;
   
   /* Error - Red */
   --tacvio-error: #DC2626;
   --tacvio-error-dark: #B91C1C;
   --tacvio-error-light: #FEE2E2;
   --tacvio-error-bg: #FEF2F2;
   --tacvio-error-border: rgba(220, 38, 38, 0.2);
   --tacvio-error-rgb: 220, 38, 38;
   
   /* Info - Blue */
   --tacvio-info: #2563EB;
   --tacvio-info-dark: #1D4ED8;
   --tacvio-info-light: #DBEAFE;
   --tacvio-info-bg: #EFF6FF;
   --tacvio-info-border: rgba(37, 99, 235, 0.2);
   --tacvio-info-rgb: 37, 99, 235;
   
   /* Neutral - Gray */
   --tacvio-neutral: #6B7280;
   --tacvio-neutral-dark: #4B5563;
   --tacvio-neutral-light: #E5E7EB;
   --tacvio-neutral-bg: #F3F4F6;
   
   /* Purple - for variety */
   --tacvio-purple: #7C3AED;
   --tacvio-purple-dark: #6D28D9;
   --tacvio-purple-light: #EDE9FE;
   --tacvio-purple-bg: #F5F3FF;
   
   /* Pink - for pink sheets and special categories */
   --tacvio-pink: #EC4899;
   --tacvio-pink-dark: #DB2777;
   --tacvio-pink-light: #FCE7F3;
   --tacvio-pink-bg: #FDF2F8;
   
   /* Cyan - for variety */
   --tacvio-cyan: #06B6D4;
   --tacvio-cyan-dark: #0891B2;
   --tacvio-cyan-light: #CFFAFE;
   --tacvio-cyan-bg: #ECFEFF;
   
   
   /* ==========================================
      SHADOWS - Elevation System
      ========================================== */
   
   --tacvio-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --tacvio-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
   --tacvio-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
   --tacvio-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
   --tacvio-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
   
   /* Component-specific shadows */
   --tacvio-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
   --tacvio-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
   --tacvio-shadow-header: 0 4px 12px rgba(0, 0, 0, 0.08);
   --tacvio-shadow-mobile-card: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
   
   /* Accent Glow Shadow */
   --tacvio-shadow-accent: 0 4px 14px rgba(212, 160, 18, 0.25);
   --tacvio-shadow-accent-lg: 0 8px 25px rgba(212, 160, 18, 0.35);
   
   /* Status Gradients */
   --tacvio-gradient-blue: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
   --tacvio-gradient-amber: var(--tacvio-accent-gradient);
   --tacvio-gradient-green: linear-gradient(135deg, #059669 0%, #047857 100%);
   --tacvio-gradient-red: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
   
   
   /* ==========================================
      BORDER RADIUS
      ========================================== */
   
   --tacvio-radius-none: 0;
   --tacvio-radius-sm: 4px;      /* Badges */
   --tacvio-radius-md: 8px;      /* Small buttons, inputs */
   --tacvio-radius-lg: 12px;     /* Buttons, form elements */
   --tacvio-radius-xl: 16px;     /* Cards, modals */
   --tacvio-radius-2xl: 20px;    /* Large cards */
   --tacvio-radius-full: 9999px; /* Pills */
   
   
   /* ==========================================
      TYPOGRAPHY
      ========================================== */
   
   --tacvio-font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
   
   /* Font Sizes */
   --tacvio-text-xs: 0.6875rem;
   --tacvio-text-sm: 0.75rem;
   --tacvio-text-base: 0.8125rem;
   --tacvio-text-md: 0.875rem;
   --tacvio-text-lg: 1rem;
   --tacvio-text-xl: 1.125rem;
   --tacvio-text-2xl: 1.25rem;
   --tacvio-text-3xl: 1.5rem;
   --tacvio-text-4xl: 2rem;
   
   /* Font Weights */
   --tacvio-font-normal: 400;
   --tacvio-font-medium: 500;
   --tacvio-font-semibold: 600;
   --tacvio-font-bold: 700;
   --tacvio-font-extrabold: 800;
   
   
   /* ==========================================
      SPACING SCALE
      ========================================== */
   
   --tacvio-space-0: 0;
   --tacvio-space-1: 0.25rem;
   --tacvio-space-2: 0.5rem;
   --tacvio-space-3: 0.75rem;
   --tacvio-space-4: 1rem;
   --tacvio-space-5: 1.25rem;
   --tacvio-space-6: 1.5rem;
   --tacvio-space-8: 2rem;
   --tacvio-space-10: 2.5rem;
   --tacvio-space-12: 3rem;
   
   /* Legacy spacing aliases */
   --space-1: var(--tacvio-space-1);
   --space-2: var(--tacvio-space-2);
   --space-3: var(--tacvio-space-3);
   --space-4: var(--tacvio-space-4);
   --space-5: var(--tacvio-space-5);
   --space-6: var(--tacvio-space-6);
   --space-8: var(--tacvio-space-8);
   --space-10: var(--tacvio-space-10);
   --space-12: var(--tacvio-space-12);
   
   
   /* ==========================================
      TRANSITIONS
      ========================================== */
   
   --tacvio-transition-fast: 0.15s ease;
   --tacvio-transition-base: 0.2s ease;
   --tacvio-transition-slow: 0.3s ease;
   
   /* Legacy aliases */
   --transition-fast: var(--tacvio-transition-fast);
   --transition-base: var(--tacvio-transition-base);
   --transition-slow: var(--tacvio-transition-slow);
   
   
   /* ==========================================
      Z-INDEX SCALE
      ========================================== */
   
   --tacvio-z-dropdown: 100;
   --tacvio-z-sticky: 200;
   --tacvio-z-fixed: 300;
   --tacvio-z-modal-backdrop: 10000;
   --tacvio-z-modal: 10001;
   --tacvio-z-popover: 10100;
   --tacvio-z-tooltip: 10200;
   
   
   /* ==========================================
      COMPONENT TOKENS
      ========================================== */
   
   /* Badge - Fixed width for alignment */
   --tacvio-badge-min-width: 90px;
   
   /* Sidebar */
   --tacvio-sidebar-width: 260px;
   --tacvio-sidebar-collapsed: 70px;
   
   /* Touch targets (PWA) */
   --tacvio-touch-target: 44px;
   
   /* Tighter Spacing */
   --tacvio-section-gap: 14px;
   --tacvio-card-body-padding: 16px;
   --tacvio-card-header-padding: 12px 16px;
   
   
   /* ==========================================
      PAGE CONTAINER
      ========================================== */
   
   --tacvio-container-max: 1400px;
   --tacvio-container-padding: 24px;
   --tacvio-container-padding-md: 20px;
   --tacvio-container-padding-sm: 16px;
   
   
   /* ==========================================
      PAGE HEADER
      ========================================== */
   
   --tacvio-page-header-padding: var(--tacvio-container-padding);
   --tacvio-page-header-padding-vertical: 20px;
   
   
   /* ==========================================
      LEGACY VARIABLE MAPPINGS
      For backward compatibility
      ========================================== */
   
   /* Old accent mappings */
   --tacvio-accent-dark: var(--tacvio-accent-hover);
   
   /* Old primary/navy mappings */
   --tacvio-navy: var(--tacvio-primary);
   --tacvio-navy-deep: var(--tacvio-primary-dark);
   --tacvio-gradient-primary: var(--tacvio-primary-gradient);
   --tacvio-gradient-navy: var(--tacvio-primary-gradient);
   --tacvio-gradient-accent: var(--tacvio-accent-gradient);
   
   /* Old background mappings */
   --tacvio-bg-dark: var(--tacvio-primary);
   --bg-light: var(--tacvio-bg);
   --bg-white: var(--tacvio-bg-white);
   --bg-subtle: var(--tacvio-bg-subtle);
   
   /* Old text mappings */
   --text-dark: var(--tacvio-text);
   --text-muted: var(--tacvio-text-muted);
   --text-light: var(--tacvio-text-light);
   --secondary-slate: var(--tacvio-text-secondary);
   
   /* Old border mappings */
   --border-light: var(--tacvio-border);
   --border-subtle: var(--tacvio-border-subtle);
   
   /* Old radius mappings */
   --radius-sm: var(--tacvio-radius-sm);
   --radius-md: var(--tacvio-radius-md);
   --radius-lg: var(--tacvio-radius-lg);
   --radius-xl: var(--tacvio-radius-xl);
   --radius-2xl: var(--tacvio-radius-2xl);
   
   /* Old shadow mappings */
   --shadow-xs: var(--tacvio-shadow-xs);
   --shadow-sm: var(--tacvio-shadow-sm);
   --shadow-md: var(--tacvio-shadow-md);
   --shadow-lg: var(--tacvio-shadow-lg);
   --shadow-xl: var(--tacvio-shadow-xl);
   --shadow-card: var(--tacvio-shadow-card);
   
   /* Old color aliases */
   --primary-blue: var(--tacvio-info);
   --primary-dark: var(--tacvio-primary);
   --primary-light: var(--tacvio-primary-light);
   --success-green: var(--tacvio-success);
   --warning-amber: var(--tacvio-warning);
   --error-red: var(--tacvio-error);
   
   /* Old green/blue/amber/red aliases */
   --tacvio-green: var(--tacvio-success);
   --tacvio-green-dark: var(--tacvio-success-dark);
   --tacvio-green-light: var(--tacvio-success-light);
   --tacvio-blue: var(--tacvio-info);
   --tacvio-blue-dark: var(--tacvio-info-dark);
   --tacvio-blue-light: var(--tacvio-info-light);
   --tacvio-amber: var(--tacvio-accent);
   --tacvio-amber-dark: var(--tacvio-accent-hover);
   --tacvio-amber-light: var(--tacvio-accent-light);
   --tacvio-red: var(--tacvio-error);
   --tacvio-red-dark: var(--tacvio-error-dark);
   --tacvio-red-light: var(--tacvio-error-light);
   
   /* Slate variables */
   --tacvio-slate: #64748B;
   --tacvio-slate-dark: #475569;
   --tacvio-slate-darker: #1E293B;
   --tacvio-slate-light: #F1F5F9;
   
   /* RGB values for rgba() usage */
   --tacvio-info-dark-rgb: 29, 78, 216;
   --tacvio-info-rgb: 37, 99, 235;
   --tacvio-text-inverse-rgb: 255, 255, 255;
   --tacvio-text-muted-rgb: 156, 163, 175;
   --tacvio-slate-darker-rgb: 30, 41, 59;
   --tacvio-bg-white-rgb: 255, 255, 255;
   --tacvio-text-secondary-rgb: 75, 85, 99;
   --tacvio-slate-rgb: 100, 116, 139;
   --tacvio-purple-rgb: 124, 58, 237;
   
   /* Stat card legacy variables */
   --tacvio-stat-1: var(--tacvio-accent);
   --tacvio-stat-1-bg: rgba(212, 160, 18, 0.1);
   --tacvio-stat-1-border: rgba(212, 160, 18, 0.2);
   --tacvio-stat-2: var(--tacvio-success);
   --tacvio-stat-2-bg: rgba(5, 150, 105, 0.1);
   --tacvio-stat-2-border: rgba(5, 150, 105, 0.2);
   --tacvio-stat-3: var(--tacvio-warning);
   --tacvio-stat-3-bg: rgba(217, 119, 6, 0.1);
   --tacvio-stat-3-border: rgba(217, 119, 6, 0.2);
   --tacvio-stat-4: var(--tacvio-info);
   --tacvio-stat-4-bg: rgba(37, 99, 235, 0.1);
   --tacvio-stat-4-border: rgba(37, 99, 235, 0.2);
   
   /* Additional RGB values for rgba() usage */
   --tacvio-primary-rgb: 30, 41, 59;
   --tacvio-primary-dark-rgb: 15, 23, 42;
   
   /* ==========================================
      BUTTON SYSTEM VARIABLES
      ========================================== */
   --tacvio-btn-primary-bg: #1E293B;
   --tacvio-btn-primary-text: #D4A012;
   --tacvio-btn-primary-border: #D4A012;
   --tacvio-btn-primary-hover-bg: #334155;
   --tacvio-btn-primary-shadow: 0 4px 14px rgba(30, 41, 59, 0.25);
   --tacvio-btn-primary-hover-shadow: 0 6px 20px rgba(30, 41, 59, 0.3), 0 0 20px rgba(212, 160, 18, 0.15);
   
   /* ==========================================
      HEADER VARIABLES (Tables, Cards, Modals)
      ========================================== */
   --tacvio-header-bg: #1E293B;
   --tacvio-header-bg-gradient: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
   --tacvio-header-text: rgba(255, 255, 255, 0.9);
   --tacvio-header-text-muted: rgba(255, 255, 255, 0.5);
   
   /* ==========================================
      FORM FOCUS STATES
      ========================================== */
   --tacvio-focus-border: #D4A012;
   --tacvio-focus-shadow: 0 0 0 3px rgba(212, 160, 18, 0.1);
   
   /* ==========================================
      STAT CARD ACCENT COLORS (for left border bars)
      ========================================== */
   --tacvio-stat-accent-blue: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
   --tacvio-stat-accent-green: linear-gradient(180deg, #10B981 0%, #059669 100%);
   --tacvio-stat-accent-amber: linear-gradient(180deg, #F59E0B 0%, #D4A012 100%);
   --tacvio-stat-accent-red: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
   
   /* ==========================================
      ICON GLOW EFFECTS
      ========================================== */
   --tacvio-glow-blue: 0 0 20px rgba(37, 99, 235, 0.15);
   --tacvio-glow-green: 0 0 20px rgba(5, 150, 105, 0.15);
   --tacvio-glow-amber: 0 0 20px rgba(212, 160, 18, 0.2);
   --tacvio-glow-red: 0 0 20px rgba(220, 38, 38, 0.15);
   
   /* ==========================================
      DANGER MODAL VARIANT
      ========================================== */
   --tacvio-danger-header-bg: linear-gradient(135deg, #7F1D1D 0%, #450A0A 100%);
   --tacvio-danger-accent: #FCA5A5;
   
   /* Dark Mode Variables - For dark-themed components (modals, tables, etc.) */
   --tacvio-dm-bg: #0F172A;
   --tacvio-dm-bg-alt: #1E293B;
   --tacvio-dm-bg-card: #1E293B;
   --tacvio-dm-bg-card-alt: #334155;
   --tacvio-dm-bg-elevated: #334155;
   --tacvio-dm-bg-hover: #2d3d52;
   --tacvio-dm-bg-row-alt: #243244;
   --tacvio-dm-text: #F1F5F9;
   --tacvio-dm-text-primary: rgba(255, 255, 255, 0.95);
   --tacvio-dm-text-secondary: rgba(255, 255, 255, 0.7);
   --tacvio-dm-text-tertiary: rgba(255, 255, 255, 0.6);
   --tacvio-dm-text-muted: rgba(255, 255, 255, 0.5);
   --tacvio-dm-border: rgba(255, 255, 255, 0.08);
   --tacvio-dm-border-subtle: rgba(255, 255, 255, 0.15);
   --tacvio-dm-border-hover: rgba(255, 255, 255, 0.25);
   --tacvio-dm-border-gold: rgba(212, 160, 18, 0.3);
   --tacvio-dm-input-bg: rgba(255, 255, 255, 0.08);
   --tacvio-dm-input-bg-hover: rgba(255, 255, 255, 0.12);
   --tacvio-dm-input-bg-focus: rgba(255, 255, 255, 0.15);
   --tacvio-dm-success: #4ADE80;
   --tacvio-dm-success-bg: rgba(34, 197, 94, 0.2);
   --tacvio-dm-success-border: rgba(34, 197, 94, 0.4);
   --tacvio-dm-link: #D4A012;
   --tacvio-dm-link-hover: #E8B930;
   --tacvio-dm-focus: #60A5FA;
   --tacvio-dm-shadow-glow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--tacvio-accent);

   /* Card row backgrounds for mobile - HIGH CONTRAST for visibility */
   --tacvio-dm-row-bg: rgba(255, 255, 255, 0.12);
   --tacvio-dm-row-border: rgba(255, 255, 255, 0.25);
   --tacvio-dm-row-bg-subtle: rgba(255, 255, 255, 0.08);
   --tacvio-dm-row-border-subtle: rgba(255, 255, 255, 0.18);

   /* Desktop table row card backgrounds - MUST contrast with page bg */
   --tacvio-dm-card-bg: #2C3E50;
   --tacvio-dm-card-bg-hover: #34495E;
   --tacvio-dm-card-border: rgba(255, 255, 255, 0.2);
   --tacvio-dm-card-border-hover: rgba(212, 160, 18, 0.5);
   --tacvio-dm-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   --tacvio-dm-card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(212, 160, 18, 0.3);

   /* ═══════════════════════════════════════════════════════════════
      DARK GLASS DARK - Container System (Added Jan 2026)
      ═══════════════════════════════════════════════════════════════ */

   /* Glass Container Backgrounds */
   --tacvio-glass-bg: linear-gradient(90deg, rgba(30, 41, 59, 0.95) 0%, rgba(20, 30, 50, 0.98) 100%);
   --tacvio-glass-solid: rgba(30, 41, 59, 0.95);
   --tacvio-glass-card-bg: rgba(30, 41, 59, 0.95);

   /* Glass Borders */
   --tacvio-glass-border: rgba(255, 255, 255, 0.08);
   --tacvio-glass-border-hover: rgba(255, 255, 255, 0.12);
   --tacvio-glass-border-focus: rgba(212, 160, 18, 0.5);

   /* Glass Surface Variations */
   --tacvio-glass-highlight: rgba(255, 255, 255, 0.03);
   --tacvio-glass-input: rgba(255, 255, 255, 0.08);
   --tacvio-glass-hover: rgba(255, 255, 255, 0.05);

   /* Glass Text Colors */
   --tacvio-glass-text: #FFFFFF;
   --tacvio-glass-text-secondary: rgba(255, 255, 255, 0.8);
   --tacvio-glass-text-muted: rgba(255, 255, 255, 0.6);
   --tacvio-glass-text-dim: rgba(255, 255, 255, 0.5);
   --tacvio-glass-text-faint: rgba(255, 255, 255, 0.4);

   /* Status Colors on Glass */
   --tacvio-glass-success-bg: rgba(16, 185, 129, 0.15);
   --tacvio-glass-success-text: #10B981;
   --tacvio-glass-success-border: rgba(16, 185, 129, 0.25);
   --tacvio-glass-warning-bg: rgba(245, 158, 11, 0.15);
   --tacvio-glass-warning-text: #F59E0B;
   --tacvio-glass-warning-border: rgba(245, 158, 11, 0.25);
   --tacvio-glass-error-bg: rgba(239, 68, 68, 0.15);
   --tacvio-glass-error-text: #EF4444;
   --tacvio-glass-error-border: rgba(239, 68, 68, 0.25);
   --tacvio-glass-info-bg: rgba(59, 130, 246, 0.15);
   --tacvio-glass-info-text: #3B82F6;
   --tacvio-glass-info-border: rgba(59, 130, 246, 0.25);
   --tacvio-glass-gold-bg: rgba(212, 160, 18, 0.15);
   --tacvio-glass-gold-text: #D4A012;
   --tacvio-glass-gold-border: rgba(212, 160, 18, 0.25);
   --tacvio-glass-purple-bg: rgba(191, 90, 242, 0.15);
   --tacvio-glass-purple-text: #BF5AF2;
   --tacvio-glass-purple-border: rgba(191, 90, 242, 0.25);
   --tacvio-glass-teal-bg: rgba(20, 184, 166, 0.15);
   --tacvio-glass-teal-text: #14B8A6;
   --tacvio-glass-teal-border: rgba(20, 184, 166, 0.25);

   /* Glass Blur Effects */
   --tacvio-glass-blur: 20px;
   --tacvio-glass-blur-heavy: 40px;
   --tacvio-glass-blur-light: 12px;

   /* ==========================================
      MOBILE DESIGN TOKENS — Fluid Design System
      Used by mobile-design-system.css and mobile-page-overrides.css
      All spacing/type uses clamp() for seamless viewport scaling
      ========================================== */

   /* Mobile Typography — Fluid Scale
      Scales fluidly from 320px to 768px viewport width */
   --tacvio-m-title: clamp(1.125rem, 2.5vw + 0.5rem, 1.5rem);
   --tacvio-m-section-title: clamp(0.9375rem, 1.5vw + 0.5rem, 1.125rem);
   --tacvio-m-body: clamp(0.875rem, 1vw + 0.5rem, 1rem);
   --tacvio-m-label: clamp(0.6875rem, 0.8vw + 0.4rem, 0.8125rem);
   --tacvio-m-caption: clamp(0.625rem, 0.7vw + 0.35rem, 0.75rem);

   /* Mobile Spacing */
   --tacvio-m-page-padding: 5%;                          /* 5% left/right from screen edge */
   --tacvio-m-page-padding-y: 2.5%;                     /* 2.5% top/bottom page padding */
   --tacvio-m-card-padding: max(2%, 12px);               /* 2% interior min, 12px floor */
   --tacvio-m-section-gap: clamp(10px, 1.5vw + 4px, 16px); /* gap between stacked boxes */
   --tacvio-m-inner-gap: max(2%, 8px);                   /* 2% interior min, 8px floor */

   /* Mobile Component Sizes — Fluid viewport-based */
   --tacvio-m-stat-height: clamp(56px, 8vw + 24px, 72px);
   --tacvio-m-stat-icon: clamp(36px, 5vw + 16px, 44px);
   --tacvio-m-stat-value: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
   --tacvio-m-stat-label: clamp(0.5625rem, 0.5vw + 0.35rem, 0.6875rem);
   --tacvio-m-input-height: clamp(44px, 6vw + 20px, 52px);
   --tacvio-m-touch-min: clamp(44px, 6vw + 20px, 48px);
   --tacvio-m-tab-height: 44px;
   --tacvio-m-fab-size: 56px;
   --tacvio-m-accordion-header: 56px;
   --tacvio-m-sheet-handle: 36px;
   --tacvio-m-bottom-sheet-radius: 5%;

   /* Mobile Border Radius */
   --tacvio-m-card-radius: 16px;                        /* Content box corners (original) */
   --tacvio-m-btn-radius: 4%;                           /* Button corners (rounded edges) */
   --tacvio-m-element-radius: 10px;                     /* Inner element corners (original) */

   /* Mobile Shadows — Two-layer (ambient + directional) for depth */
   --tacvio-m-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
   --tacvio-m-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.12);
   --tacvio-m-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.14);

   /* Mobile Animation — Premium easing */
   --tacvio-m-anim-fast: 150ms;
   --tacvio-m-anim-base: 250ms;
   --tacvio-m-anim-sheet: 350ms;
   --tacvio-m-anim-stagger: 50ms;
   --tacvio-m-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --tacvio-m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

   /* Mobile Glass Card (dark bg for table-to-card) */
   --tacvio-m-glass-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(20, 30, 50, 0.98) 100%);
   --tacvio-m-glass-border: rgba(255, 255, 255, 0.08);
   --tacvio-m-glass-text: #FFFFFF;
   --tacvio-m-glass-text-muted: rgba(255, 255, 255, 0.6);
}


/* ==========================================
  UTILITY CLASSES
  ========================================== */

/* Background Colors */
.tacvio-bg-primary { background: var(--tacvio-primary) !important; }
.tacvio-bg-accent { background: var(--tacvio-accent) !important; }
.tacvio-bg-success { background: var(--tacvio-success) !important; }
.tacvio-bg-warning { background: var(--tacvio-warning) !important; }
.tacvio-bg-error { background: var(--tacvio-error) !important; }

/* Text Colors */
.tacvio-text-primary { color: var(--tacvio-text) !important; }
.tacvio-text-accent { color: var(--tacvio-accent) !important; }
.tacvio-text-success { color: var(--tacvio-success) !important; }
.tacvio-text-warning { color: var(--tacvio-warning) !important; }
.tacvio-text-error { color: var(--tacvio-error) !important; }
.tacvio-text-muted { color: var(--tacvio-text-muted) !important; }

/* Gradient Backgrounds */
.tacvio-gradient-primary { background: var(--tacvio-primary-gradient) !important; }
.tacvio-gradient-accent { background: var(--tacvio-accent-gradient) !important; }

/* Accent Glow Effect */
.tacvio-glow-accent {
   box-shadow: var(--tacvio-shadow-accent) !important;
}