/* 
 * File: includes/color.css
 * Theme: Official Multimedia Gen Branding (USA Client Premium Edition)
 */

/* 🔥 Premium Highly Readable & Ultra-Bold Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@700;800;900&display=swap');

/* ==========================================
   1. OFFICIAL BRAND VARIABLES (Multimedia Gen)
   ========================================== */
:root {
    /* 🟢 Official Brand Colors */
    --brand-primary: #16C24A; 
    --brand-dark: #14963A;
    --brand-blue: #3798F2;
    --brand-purple: #7C3AED;
    
    /* Smooth Hover state based on primary */
    --brand-hover: #1bd653; 
    
    /* Premium Gradients */
    --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-dark) 100%);
    --brand-gradient-animated: linear-gradient(270deg, var(--brand-dark), var(--brand-primary), var(--brand-blue), var(--brand-primary));

    /* ⚫ Official Luxury Black Backgrounds */
    --bg-main: #050505;        /* Deep Luxury Black for main body */
    --bg-secondary: #0A0A0A;   
    --bg-card: #0A0A0A;        /* Solid deep black for cards */        
    --bg-card-hover: #111111;  
    --bg-footer: #050505;
    
    /* 🪟 Clean Glassmorphism (No green tint, purely neutral) */
    --bg-glass: rgba(5, 5, 5, 0.7);
    --bg-glass-strong: rgba(5, 5, 5, 0.9);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02);

    /* ⚪ Official Typography Colors */
    --text-main: #FFFFFF; 
    --text-secondary: #E4E4E7;
    --text-muted: #A1A1AA;

    /* 📏 Minimalist Borders (Strictly neutral gray) */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-brand: rgba(22, 194, 74, 0.3); /* Subtle brand border */

    /* 🌌 Cinematic Shadows (Dark depth, removed blinding neon glow) */
    --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.8);
    --shadow-large: 0 20px 40px -10px rgba(0, 0, 0, 0.95);
    
    /* Subdued Glow for Buttons */
    --shadow-glow: 0 4px 15px rgba(22, 194, 74, 0.08); 
    --shadow-glow-strong: 0 8px 25px rgba(22, 194, 74, 0.2); 
}

/* ==========================================
   2. GLOBAL RESET & RESPONSIVE TYPOGRAPHY
   ========================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    scroll-behavior: smooth; 
    background-color: var(--bg-main);
    font-size: 16px; /* Base for PC */
}

@media (max-width: 768px) {
    html { font-size: 14px; } 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main) !important;
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 500; 
}

/* 🔥 Force Ultra-Bold Fonts for Headings */
h1, h2, h3, h4, h5, h6, .font-heading, .heading-main {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

.text-main-color { color: var(--text-main); }
.text-muted-color { color: var(--text-muted); }

::selection { background: var(--brand-primary); color: #050505; text-shadow: none; }

/* Clean Scrollbar */
::-webkit-scrollbar { width: 6px; background-color: var(--bg-main); }
::-webkit-scrollbar-thumb { background: #27272A; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

/* ==========================================
   3. UI CLASSES (Minimalist & Premium)
   ========================================== */
.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft), var(--glass-highlight);
    border-radius: 2.5rem;
    transition: all 0.4s ease;
}
.glass-panel:hover { border-color: var(--border-light); box-shadow: var(--shadow-large), var(--glass-highlight); }

.luxury-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.4s ease;
}
.luxury-card:hover { border-color: var(--border-brand); box-shadow: var(--shadow-large); transform: translateY(-4px); }

/* Buttons - Sharp & High Contrast */
.btn-primary {
    background: var(--brand-primary) !important;
    color: #050505 !important; 
    border: none;
    font-weight: 800 !important; 
    font-family: 'Outfit', sans-serif;
    box-shadow: var(--shadow-glow);
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-primary:hover { background: var(--brand-hover) !important; box-shadow: var(--shadow-glow-strong); transform: translateY(-2px); }

/* Text Gradients */
.text-gradient-brand {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Inputs */
input, textarea, select {
    background: #0A0A0A !important; 
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease;
    font-weight: 500;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
input:focus, textarea:focus { 
    border-color: var(--brand-primary) !important; 
    box-shadow: 0 0 0 1px var(--brand-primary) !important; 
    outline: none; 
}

/* ==========================================
   4. HEADER "HIRE NOW" BUTTON FIX
   ========================================== */
nav a[href="#contact"] {
    background-color: var(--brand-primary) !important;
    color: #050505 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-shadow: none !important;
    border-radius: 9999px !important;
    transition: all 0.3s ease;
}
nav a[href="#contact"] i { color: #050505 !important; }
nav a[href="#contact"]:hover { background-color: var(--brand-hover) !important; transform: scale(1.05); }

/* ==========================================
   5. 🔴 ANTI-GLOW OVERRIDE FOR USA CLIENTS 🔴
   ========================================== */
/* Automatically suppresses the excessive background glows generated by Tailwind classes */
.blur-\[80px\], .blur-\[100px\], .blur-\[120px\], .blur-\[150px\] {
    opacity: 0.02 !important; 
}