/* 
 * File: includes/color.css
 * Theme: Ultra-Premium Cinematic Dark Mode (Bold & Vibrant 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. USER-FRIENDLY & VIBRANT DARK VARIABLES
   ========================================== */
:root {
    /* 🔥 Upgraded Vibrant Neon Green for Max Visibility */
    --brand-primary: #00F05C; 
    --brand-hover: #14FF6F;
    --brand-dark: #00B846;
    --brand-light: #66FF9F;
    
    --brand-gradient: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-primary) 50%, var(--brand-dark) 100%);
    --brand-gradient-animated: linear-gradient(270deg, var(--brand-dark), var(--brand-primary), var(--brand-light), var(--brand-primary));

    /* Cinematic Ultra-Dark Backgrounds (Better contrast for Neon Green) */
    --bg-main: #040605;        
    --bg-secondary: #080C0A;   
    --bg-card: rgba(12, 18, 15, 0.7);        
    --bg-card-hover: rgba(18, 26, 22, 0.9);  
    --bg-footer: #030504;
    
    /* Smooth Glassmorphism */
    --bg-glass: rgba(8, 12, 10, 0.75);
    --bg-glass-strong: rgba(4, 6, 5, 0.95);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.03);

    /* Crisper & Bolder Typography Colors */
    --text-main: #FFFFFF; /* Pure white for max readability */
    --text-secondary: #E5E7EB;
    --text-muted: #9CA3AF;

    /* Subtle Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.15);
    --border-brand: rgba(0, 240, 92, 0.35);

    /* Cinematic Glowing Shadows */
    --shadow-soft: 0 15px 35px -5px rgba(0, 0, 0, 0.6);
    --shadow-large: 0 25px 50px -10px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 30px rgba(0, 240, 92, 0.20);
    --shadow-glow-strong: 0 0 50px rgba(0, 240, 92, 0.40);
}

/* ==========================================
   2. Global Reset & Body Defaults
   ========================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    scroll-behavior: smooth; 
    background-color: var(--bg-main);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 500; /* Made body text slightly bolder globally */
}

/* 🔥 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; /* Max Boldness */
    letter-spacing: -0.02em;
}

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

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

::-webkit-scrollbar { width: 6px; background-color: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

/* ==========================================
   3. UI Classes (Glassmorphism & Cards)
   ========================================== */
.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft), var(--glass-highlight);
    border-radius: 2rem;
    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), var(--shadow-glow); transform: translateY(-4px); }

/* Buttons */
.btn-primary {
    background: var(--brand-primary) !important; /* Solid Vibrant Green */
    color: #000000 !important; /* Forced Pitch Black Text */
    border: none;
    font-weight: 900 !important; /* Extra Bold Text */
    font-family: 'Outfit', sans-serif;
    box-shadow: var(--shadow-glow);
    transition: all 0.4s 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-animated);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 5s ease infinite;
}
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@keyframes blob { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-20px) scale(1.05); } }
.animate-blob { animation: blob 10s infinite alternate ease-in-out; }

/* Inputs */
input, textarea, select {
    background: var(--bg-main) !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 3px rgba(0,240,92,0.15) !important; }

/* ==========================================
   4. 🔥 GUARANTEED FIX FOR HEADER "HIRE NOW" BUTTON 
   ========================================== */
nav a[href="#contact"] {
    background-color: var(--brand-primary) !important;
    color: #000000 !important; /* Forces text to be solid black */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important; /* Max boldness */
    letter-spacing: 0.15em !important;
    text-shadow: none !important;
}
nav a[href="#contact"] i {
    color: #000000 !important; /* Forces the lightning icon to be black */
}
nav a[href="#contact"]:hover {
    background-color: var(--brand-hover) !important;
}