/* css/variables.css */
:root {
    /* Brand Colors extracted from Corpohosting description */
    --brand-blue: #1b4d82; /* Deep corporate blue */
    --brand-blue-light: #2563eb;
    --brand-blue-dark: #0f2a4a;
    
    --accent-orange: #f59e0b;
    --accent-yellow: #eab308;
    --accent-green: #22c55e;
    --accent-blue: #3b82f6;
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing & Layout */
    --nav-height: 85px;
    --section-pad: 6rem 2rem;
    --container-width: 1280px;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    
    /* Transitions */
    --trans-fast: 150ms ease;
    --trans-normal: 300ms ease;
    --trans-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------- LIGHT THEME --------------- */
:root[data-theme="light"] {
    --hero-overlay: rgba(248, 250, 252, 0.90);
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-elevated: #ffffff;
    
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    
    --border-color: #e2e8f0;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);
    
    --btn-primary-bg: var(--brand-blue-light);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--brand-blue);
}

/* --------------- DARK THEME --------------- */
:root[data-theme="dark"] {
    /* Using deep elegant slate/blue for a premium feel */
    --hero-overlay: rgba(2, 6, 23, 0.85);
    --bg-primary: #020617; 
    --bg-secondary: #0f172a;
    --bg-elevated: #1e293b;
    
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    
    --border-color: #334155;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.2);
    
    --btn-primary-bg: var(--brand-blue-light);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--accent-blue);
}