:root {
    /* --- Colors --- */
    /* Primary (Deep SaaS Blue) */
    --primary-h: 220;
    --primary-s: 90%;
    --primary-l: 56%;
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-dark: hsl(var(--primary-h), var(--primary-s), 45%);
    --primary-light: hsl(var(--primary-h), var(--primary-s), 95%);
    --primary-soft: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);

    /* Secondary (Vibrant Accent) */
    --accent-h: 260;
    --accent: hsl(var(--accent-h), 85%, 60%);

    /* Neutral Palette */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Semantic & Accent Colors */
    --blue: #3b82f6;
    --green: #10b981;
    --orange: #f59e0b;
    --success: var(--green);
    --warning: var(--orange);
    --danger: #ef4444;
    --info: var(--blue);

    /* Soft Backgrounds for status badges & highlights */
    --success-soft: rgba(16, 185, 129, 0.1);
    --warning-soft: rgba(245, 158, 11, 0.1);
    --danger-soft: rgba(239, 68, 68, 0.1);
    --info-soft: rgba(59, 130, 246, 0.1);

    /* Gradients */
    --gradient-blue: linear-gradient(135deg, #5EE7FF 0%, #2563EB 100%);
    --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-red: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);

    /* --- Typography --- */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Responsve font sizes using clamp */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);

    /* --- Spacing --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* --- Borders & Radius --- */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* --- Semantic Variables (Light Mode Default) --- */
    --bg-main: var(--gray-50);
    --bg-card: #ffffff;
    --bg-muted: var(--gray-100);
    --bg-surface: var(--gray-50);
    --bg-sidebar: var(--gray-900);
    
    --text-main: var(--gray-800);
    --text-muted: var(--gray-500);
    --text-header: var(--gray-900);
    --text-inverse: #ffffff;
    
    --border-base: var(--gray-200);
    --border-soft: var(--gray-100);

    /* --- Shadows (Premium Elevation) --- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --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-card: var(--shadow-sm);

    /* Overlays & Glass */
    --overlay-base: rgba(0, 0, 0, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);

    /* Form Elements */
    --input-bg: rgba(255, 255, 255, 0.8);
    --input-border: var(--gray-200);
    --input-focus: var(--primary);
    --input-radius: 8px;
    
    /* --- Transitions --- */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    --primary-hover: var(--primary-dark);
    --border: var(--border-base);
    --radius: var(--radius-md);
    --shadow: var(--shadow-card);
    
    /* Legacy Aliases */
    --primary-black: var(--gray-900);

    /* --- Page Transitions --- */
    --transition-page: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Mode Overrides --- */
html[data-theme='dark'] {
    --bg-main: #000000;
    --bg-card: #0a0a0b;
    --bg-muted: #121214;
    --bg-surface: #000000;
    --bg-sidebar: #000000;

    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-header: #ffffff;
    --text-inverse: #000000;

    --border-base: rgba(255, 255, 255, 0.12);
    --border-soft: rgba(255, 255, 255, 0.06);

    /* High Contrast Border for Dark Mode Cards/Buttons */
    --border-accent: rgba(255, 255, 255, 0.35);
    --border-white: #ffffff;

    --gray-50: #050506;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;

    --input-bg: rgba(30, 41, 59, 0.5);
    --input-border: #334155;
    
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px 0 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.1);

    --overlay-base: rgba(0, 0, 0, 0.7);
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Legacy Aliases */
    --primary-black: var(--text-main);
}