/* ========================================
   GUACAMOLE™ DESIGN SYSTEM VARIABLES
   Core CSS Custom Properties
   ======================================== */

:root {
    /* ========================================
       TYPOGRAPHY SYSTEM
       ======================================== */
    
    --font-family-base: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================
       SPACING SYSTEM
       ======================================== */
    
    --space-0: 0;
    --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 */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* ========================================
       BORDER RADIUS
       ======================================== */
    
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* ========================================
       SHADOWS
       ======================================== */
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ========================================
       LAYOUT CONSTANTS
       ======================================== */
    
    --navbar-height: 60px;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px;
    --container-max-width: 1200px;
    --content-max-width: 800px;

    /* ========================================
       TRANSITION SYSTEM
       ======================================== */
    
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-bounce: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-smooth: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* UX Flow Enhancement Variables */
    --hover-lift: translateY(-2px);
    --active-press: translateY(1px);
    --scale-hover: scale(1.02);
    --scale-active: scale(0.98);
    --focus-ring: 0 0 0 3px var(--primary-overlay-light);
    --success-pulse: 0 0 0 4px var(--success-overlay-light);
    --error-pulse: 0 0 0 4px var(--error-overlay-light);

    /* ========================================
       BRAND COLORS
       ======================================== */
    
    --guacamole-primary: #00A3E0;
    --guacamole-primary-hover: #0084b5;
    --guacamole-primary-active: #006b94;
    --guacamole-primary-light: #e6f7ff;
    --guacamole-primary-50: #f0f9ff;
    --guacamole-primary-100: #e0f2fe;
    --guacamole-primary-200: #bae6fd;
    --guacamole-primary-300: #7dd3fc;
    --guacamole-primary-400: #38bdf8;
    --guacamole-primary-500: #00A3E0;
    --guacamole-primary-600: #0284c7;
    --guacamole-primary-700: #0369a1;
    --guacamole-primary-800: #075985;
    --guacamole-primary-900: #0c4a6e;
    --guacamole-primary-950: #082f49;

    /* ========================================
       SEMANTIC COLORS
       ======================================== */
    
    /* Success Colors */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;
    --success-950: #052e16;
    
    /* Warning Colors */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fed7aa;
    --warning-300: #fdba74;
    --warning-400: #fb923c;
    --warning-500: #f97316;
    --warning-600: #ea580c;
    --warning-700: #c2410c;
    --warning-800: #9a3412;
    --warning-900: #7c2d12;
    --warning-950: #431407;
    
    /* Error Colors */
    --error-50: #fef2f2;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-300: #fca5a5;
    --error-400: #f87171;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;
    --error-800: #991b1b;
    --error-900: #7f1d1d;
    --error-950: #450a0a;
    
    /* Info Colors */
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bfdbfe;
    --info-300: #93c5fd;
    --info-400: #60a5fa;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-800: #1e40af;
    --info-900: #1e3a8a;
    --info-950: #172554;
    
    /* OAuth Brand Colors */
    --google-blue: #4285f4;
    --microsoft-blue: #00a4ef;
    
    /* Theme Icon Colors */
    --theme-sun-color: #FFDE59;
    --theme-moon-color: #94a3b8;

    /* ========================================
       NEUTRAL COLORS
       ======================================== */

    /* Pure Neutrals */
    --white: #ffffff;
    --black: #000000;
    
    /* Professional Gray Scale */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    /* Slate Scale for Dark Theme */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* ========================================
       LIGHT THEME (Default)
       ======================================== */
    
    /* Background Colors */
    --bg-color: var(--white);
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    
    /* Surface Colors */
    --surface: var(--white);
    --surface-hover: var(--gray-50);
    --surface-active: var(--gray-100);
    --surface-elevated: var(--white);
    
    /* Text Colors */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-500);
    --text-quaternary: var(--gray-400);
    --text-inverse: var(--white);
    --text-muted: var(--gray-400);
    
    /* Border Colors */
    --border-color: var(--gray-200);
    --border-light: var(--gray-100);
    --border-strong: var(--gray-300);
    --border-hover: var(--gray-300);
    --border-focus: var(--guacamole-primary-500);

    /* Scrollbars - quiet slate at rest, brand blue while hovered or dragged */
    --scrollbar-thumb: var(--slate-400);
    --scrollbar-thumb-hover: var(--guacamole-primary-500);
    --scrollbar-thumb-active: var(--guacamole-primary-600);
    --scrollbar-track: transparent;

    /* Brand Theme Colors */
    --primary-color: var(--guacamole-primary-500);
    --primary-hover: var(--guacamole-primary-600);
    --primary-active: var(--guacamole-primary-700);
    --primary-light: var(--guacamole-primary-50);
    --primary-subtle: var(--guacamole-primary-100);
    
    /* Semantic Color Mappings */
    --success: var(--success-500);
    --success-light: var(--success-50);
    --success-subtle: var(--success-100);
    --success-hover: var(--success-600);
    
    --warning: var(--warning-500);
    --warning-light: var(--warning-50);
    --warning-subtle: var(--warning-100);
    --warning-hover: var(--warning-600);
    
    --error: var(--error-500);
    --error-light: var(--error-50);
    --error-subtle: var(--error-100);
    --error-hover: var(--error-600);
    
    /* Missing semantic hover colors */
    --success-dark: var(--success-600);
    --warning-dark: var(--warning-600);  
    --error-dark: var(--error-600);
    
    /* Missing variables that error pages reference */
    --warning-color: var(--warning-50);
    --secondary-color: var(--text-secondary);
    --text-color: var(--text-primary);
    /* Legacy semantic aliases (theme-aware via the tokens they reference) */
    --success-color: var(--success);
    --danger-color: var(--error);
    --secondary-bg: var(--bg-secondary);
    
    --info: var(--info-500);
    --info-light: var(--info-50);
    --info-subtle: var(--info-100);
    --info-hover: var(--info-600);
    
    /* Interactive Colors */
    --link-color: var(--guacamole-primary-600);
    --link-hover: var(--guacamole-primary-700);
    --link-visited: var(--guacamole-primary-800);
    
    /* Component Colors */
    --card-bg: var(--white);
    --card-hover: var(--gray-50);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);
    
    /* Navbar Colors */
    --navbar-bg: var(--white);
    --navbar-text: var(--text-primary);
    --navbar-shadow: var(--shadow-sm);
    --navbar-border: var(--border-light);
    
    /* Form Colors */
    --input-bg: var(--white);
    --input-border: var(--border-color);
    --input-focus: var(--border-focus);
    --input-placeholder: var(--gray-400);
    --input-disabled: var(--gray-100);
    --input-disabled-text: var(--gray-400);
    --input-focus-shadow: 0 0 0 3px rgba(0, 163, 224, 0.12);
    --checkbox-focus-shadow: 0 0 0 3px rgba(0, 163, 224, 0.12);
    --success-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
    --error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    
    /* Form Validation Colors */
    --input-error: var(--error);
    --input-error-border: var(--error-600);
    --input-success-border: var(--success-600);
    
    /* Advanced Overlays & Effects */
    --primary-overlay-light: rgba(0, 163, 224, 0.04);
    --primary-overlay-medium: rgba(0, 163, 224, 0.08);
    --primary-overlay-strong: rgba(0, 163, 224, 0.12);
    --primary-glow: 0 0 0 3px rgba(0, 163, 224, 0.15);
    --primary-glow-strong: 0 0 0 4px rgba(0, 163, 224, 0.25);
    
    /* Surface Overlays */
    --white-overlay: rgba(255, 255, 255, 0.04);
    --white-overlay-strong: rgba(255, 255, 255, 0.08);
    --black-overlay-light: rgba(0, 0, 0, 0.04);
    --black-overlay-medium: rgba(0, 0, 0, 0.08);
    --black-overlay-strong: rgba(0, 0, 0, 0.12);
    
    /* Elevation System */
    --elevation-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
    --elevation-low: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --elevation-medium: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --elevation-high: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --elevation-hero: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
    
    /* Brand Specific Effects */
    --primary-shadow-subtle: 0 4px 6px rgba(0, 163, 224, 0.07);
    --primary-shadow-medium: 0 8px 25px rgba(0, 163, 224, 0.15);
    --primary-shadow-strong: 0 25px 50px rgba(0, 163, 224, 0.25);
    
    /* Plan & Subscription Effects */
    --plan-premium-glow: 0 8px 32px rgba(34, 197, 94, 0.15);
    --plan-enterprise-glow: 0 8px 32px rgba(0, 163, 224, 0.15);
    --gold-accent: #fbbf24;
    --gold-glow: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
    --silver-accent: #94a3b8;
    --silver-glow: drop-shadow(0 0 3px rgba(148, 163, 184, 0.3));
    
    /* Animation Effects */
    --pulse-primary-start: 0 0 0 0 rgba(0, 163, 224, 0.4);
    --pulse-primary-mid: 0 0 0 8px rgba(0, 163, 224, 0.1);
    --pulse-primary-end: 0 0 0 12px rgba(0, 163, 224, 0);
    
    /* Loading & Backdrop */
    --loading-backdrop-light: rgba(255, 255, 255, 0.94);
    --loading-backdrop-dark: rgba(15, 23, 42, 0.94);
    --modal-backdrop: rgba(15, 23, 42, 0.8);
    
    /* Glass Effects */
    --glass-subtle: rgba(255, 255, 255, 0.05);
    --glass-medium: rgba(255, 255, 255, 0.1);
    --glass-strong: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    /* Ring Effects */
    --ring-primary: 0 0 0 2px rgba(0, 163, 224, 0.2);
    --ring-primary-strong: 0 0 0 3px rgba(0, 163, 224, 0.3);
    --ring-success: 0 0 0 2px rgba(34, 197, 94, 0.2);
    --ring-error: 0 0 0 2px rgba(239, 68, 68, 0.2);
    --ring-warning: 0 0 0 2px rgba(247, 147, 22, 0.2);
    
    /* Button Colors */
    --button-primary-bg: var(--primary-color);
    --button-primary-text: var(--white);
    --button-primary-hover: var(--primary-hover);
    --button-primary-active: var(--primary-active);
    --button-primary-shadow: var(--primary-shadow-subtle);
    
    --button-secondary-bg: transparent;
    --button-secondary-text: var(--primary-color);
    --button-secondary-border: var(--primary-color);
    --button-secondary-hover: var(--primary-light);
    
    --button-ghost-bg: transparent;
    --button-ghost-text: var(--text-secondary);
    --button-ghost-hover: var(--surface-hover);
    
    --button-danger-bg: var(--error-500);
    --button-danger-text: var(--white);
    --button-danger-hover: var(--error-600);
}

/* ========================================
   DARK THEME OVERRIDES - PROFESSIONAL SLATE
   ======================================== */

[data-theme="dark"] {
    /* Background Colors - Professional Slate/Blue Tints */
    --bg-color: var(--slate-950);           /* #020617 - Deep slate background */
    --bg-secondary: var(--slate-900);       /* #0f172a - Secondary surfaces */
    --bg-tertiary: var(--slate-800);        /* #1e293b - Tertiary surfaces */
    
    /* Surface Colors - Elevated Elements */
    --surface: var(--slate-900);            /* #0f172a - Primary surface */
    --surface-hover: var(--slate-800);      /* #1e293b - Hover state */
    --surface-active: var(--slate-700);     /* #334155 - Active state */
    --surface-elevated: var(--slate-800);   /* #1e293b - Elevated elements */
    
    /* Text Colors - Professional Contrast */
    --text-primary: var(--slate-50);        /* #f8fafc - Primary text */
    --text-secondary: var(--slate-300);     /* #cbd5e1 - Secondary text */
    --text-tertiary: var(--slate-400);      /* #94a3b8 - Tertiary text */
    --text-quaternary: var(--slate-500);    /* #64748b - Quaternary text */
    --text-inverse: var(--slate-950);       /* #020617 - Inverse text */
    --text-muted: var(--slate-500);         /* #64748b - Muted text */
    
    /* Border Colors - Subtle Slate Borders */
    --border-color: var(--slate-700);       /* #334155 - Default borders */
    --border-light: var(--slate-800);       /* #1e293b - Light borders */
    --border-strong: var(--slate-600);      /* #475569 - Strong borders */
    --border-hover: var(--slate-600);       /* #475569 - Hover borders */
    --border-focus: var(--guacamole-primary-400); /* #38bdf8 - Focus borders */
    
    /* Brand Theme Colors - Adjusted for Dark */
    --primary-color: var(--guacamole-primary-400);    /* #38bdf8 - Brighter for contrast */
    --primary-hover: var(--guacamole-primary-300);    /* #7dd3fc */
    --primary-active: var(--guacamole-primary-500);   /* #00A3E0 */
    --primary-light: rgba(56, 189, 248, 0.1);         /* Subtle primary overlay */
    --primary-subtle: rgba(56, 189, 248, 0.05);       /* Very subtle primary */

    /* Scrollbars */
    --scrollbar-thumb: var(--slate-600);              /* #475569 */
    --scrollbar-thumb-hover: var(--guacamole-primary-400);
    --scrollbar-thumb-active: var(--guacamole-primary-500);

    /* Semantic Color Mappings - Dark Optimized */
    --success: var(--success-400);          /* #4ade80 - Brighter for dark */
    --success-light: rgba(74, 222, 128, 0.1);
    --success-subtle: rgba(74, 222, 128, 0.05);
    --success-hover: var(--success-300);
    
    --warning: var(--warning-400);          /* #fb923c */
    --warning-light: rgba(251, 146, 60, 0.1);
    --warning-subtle: rgba(251, 146, 60, 0.05);
    --warning-hover: var(--warning-300);
    
    --error: var(--error-400);              /* #f87171 */
    --error-light: rgba(248, 113, 113, 0.1);
    --error-subtle: rgba(248, 113, 113, 0.05);
    --error-hover: var(--error-300);
    
    --info: var(--info-400);                /* #60a5fa */
    --info-light: rgba(96, 165, 250, 0.1);
    --info-subtle: rgba(96, 165, 250, 0.05);
    --info-hover: var(--info-300);
    
    /* Interactive Colors */
    --link-color: var(--guacamole-primary-400);      /* #38bdf8 */
    --link-hover: var(--guacamole-primary-300);      /* #7dd3fc */
    --link-visited: var(--guacamole-primary-500);    /* #00A3E0 */
    
    /* Component Colors */
    --card-bg: var(--slate-900);                     /* #0f172a */
    --card-hover: var(--slate-800);                  /* #1e293b */
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
    --card-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.25);
    
    /* Navbar Colors */
    --navbar-bg: var(--slate-900);                   /* #0f172a */
    --navbar-text: var(--text-primary);
    --navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
    --navbar-border: var(--slate-800);               /* #1e293b */
    
    /* Form Colors */
    --input-bg: var(--slate-800);                    /* #1e293b */
    --input-border: var(--slate-700);                /* #334155 */
    --input-focus: var(--guacamole-primary-400);     /* #38bdf8 */
    --input-placeholder: var(--slate-500);           /* #64748b */
    --input-disabled: var(--slate-800);              /* #1e293b */
    --input-disabled-text: var(--slate-600);         /* #475569 */
    --input-focus-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    --checkbox-focus-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    --success-focus-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
    --error-focus-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
    
    /* Form Validation Colors - Dark Theme */
    --input-error: var(--error-400);
    --input-error-border: var(--error-400);
    --input-success-border: var(--success-400);
    
    /* Advanced Overlays & Effects - Dark Optimized */
    --primary-overlay-light: rgba(56, 189, 248, 0.08);
    --primary-overlay-medium: rgba(56, 189, 248, 0.12);
    --primary-overlay-strong: rgba(56, 189, 248, 0.16);
    --primary-glow: 0 0 0 3px rgba(56, 189, 248, 0.3);
    --primary-glow-strong: 0 0 0 4px rgba(56, 189, 248, 0.4);
    
    /* Surface Overlays - Dark Theme */
    --white-overlay: rgba(248, 250, 252, 0.03);      /* Subtle white overlay */
    --white-overlay-strong: rgba(248, 250, 252, 0.06);
    --black-overlay-light: rgba(2, 6, 23, 0.2);      /* Deeper blacks */
    --black-overlay-medium: rgba(2, 6, 23, 0.4);
    --black-overlay-strong: rgba(2, 6, 23, 0.6);
    
    /* Elevation System - Enhanced for Dark */
    --elevation-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
    --elevation-low: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
    --elevation-medium: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
    --elevation-high: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
    --elevation-hero: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.3);
    
    /* Brand Specific Effects - Dark */
    --primary-shadow-subtle: 0 4px 6px rgba(56, 189, 248, 0.1);
    --primary-shadow-medium: 0 8px 25px rgba(56, 189, 248, 0.2);
    --primary-shadow-strong: 0 25px 50px rgba(56, 189, 248, 0.3);
    
    /* Plan & Subscription Effects - Dark */
    --plan-premium-glow: 0 8px 32px rgba(74, 222, 128, 0.25);
    --plan-enterprise-glow: 0 8px 32px rgba(56, 189, 248, 0.25);
    --gold-accent: #fbbf24;
    --gold-glow: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
    --silver-accent: #94a3b8;
    --silver-glow: drop-shadow(0 0 4px rgba(148, 163, 184, 0.5));
    
    /* Animation Effects - Dark */
    --pulse-primary-start: 0 0 0 0 rgba(56, 189, 248, 0.5);
    --pulse-primary-mid: 0 0 0 8px rgba(56, 189, 248, 0.2);
    --pulse-primary-end: 0 0 0 12px rgba(56, 189, 248, 0);
    
    /* Loading & Backdrop - Dark */
    --loading-backdrop-light: rgba(2, 6, 23, 0.95);
    --loading-backdrop-dark: rgba(2, 6, 23, 0.98);
    --modal-backdrop: rgba(2, 6, 23, 0.9);
    
    /* Glass Effects - Dark Theme */
    --glass-subtle: rgba(248, 250, 252, 0.02);
    --glass-medium: rgba(248, 250, 252, 0.05);
    --glass-strong: rgba(248, 250, 252, 0.1);
    --glass-border: rgba(248, 250, 252, 0.08);
    
    /* Ring Effects - Dark */
    --ring-primary: 0 0 0 2px rgba(56, 189, 248, 0.3);
    --ring-primary-strong: 0 0 0 3px rgba(56, 189, 248, 0.4);
    --ring-success: 0 0 0 2px rgba(74, 222, 128, 0.3);
    --ring-error: 0 0 0 2px rgba(248, 113, 113, 0.3);
    --ring-warning: 0 0 0 2px rgba(251, 146, 60, 0.3);
    
    /* Button Colors - Dark Theme */
    --button-primary-bg: var(--guacamole-primary-500);   /* Keep original brand */
    --button-primary-text: var(--white);
    --button-primary-hover: var(--guacamole-primary-400);
    --button-primary-active: var(--guacamole-primary-600);
    --button-primary-shadow: var(--primary-shadow-subtle);
    
    --button-secondary-bg: transparent;
    --button-secondary-text: var(--guacamole-primary-400);
    --button-secondary-border: var(--guacamole-primary-400);
    --button-secondary-hover: rgba(56, 189, 248, 0.1);
    
    --button-ghost-bg: transparent;
    --button-ghost-text: var(--text-secondary);
    --button-ghost-hover: var(--slate-800);
    
    --button-danger-bg: var(--error-500);
    --button-danger-text: var(--white);
    --button-danger-hover: var(--error-400);
}

/* ========================================
   UTILITY VARIABLES
   ======================================== */

:root {
    /* Responsive Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    
    /* Content Widths */
    --content-sm: 640px;
    --content-md: 768px;
    --content-lg: 1024px;
    --content-xl: 1280px;
    --content-2xl: 1536px;
}