/*
 * THEME: Midnight
 * A sophisticated dark theme with cyan/teal accents.
 * Deep, rich backgrounds with glowing highlights.
 */

:root {
    /* Colors - Primary (Cyan/Teal) */
    --color-primary: #06b6d4;
    --color-primary-light: #22d3ee;
    --color-primary-dark: #0891b2;

    /* Colors - Accent (Warm Gold) */
    --color-accent: #fbbf24;
    --color-accent-light: #fcd34d;
    --color-accent-dark: #f59e0b;

    /* Colors - Background (Dark Blues) */
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-bg-elevated: #1e293b;

    /* Colors - Text */
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #0f172a;

    /* Colors - Border & Dividers */
    --color-border: #334155;
    --color-border-strong: #475569;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Shadows - Glowing effect for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 182, 212, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 0 30px rgba(6, 182, 212, 0.15);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 0 40px rgba(6, 182, 212, 0.2);

    /* Hero Shapes - Glowing orbs */
    --shape-1-bg: var(--color-primary);
    --shape-2-bg: var(--color-accent);
    --shape-3-bg: #8b5cf6;

    /* Component Specific */
    --card-bg: #1e293b;
    --card-border: #334155;
    --card-shadow: var(--shadow-md);
    --btn-radius: 6px;

    /* Section Label */
    --label-color: var(--color-primary);
}

/* Enhanced hero shapes for glow effect */
.hero__shape {
    filter: blur(60px);
    opacity: 0.25;
}

.hero__shape--1 {
    box-shadow: 0 0 80px var(--color-primary);
}

.hero__shape--2 {
    box-shadow: 0 0 60px var(--color-accent);
}

.hero__shape--3 {
    box-shadow: 0 0 50px #8b5cf6;
}

/* Testimonial section */
.testimonial {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #0e7490 100%);
}

/* Service cards with subtle glow on hover */
.service-card:hover {
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.2), 0 0 40px rgba(6, 182, 212, 0.1);
}

/* Project placeholder gradients */
.project-card__placeholder {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 50%, #164e63 100%);
}

/* Navigation with subtle blur */
.nav {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Stats number glow */
.stat__number {
    text-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
}

/* Contact email glow on hover */
.contact__email:hover {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

/* Social icons */
.contact__social a {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}

.contact__social a:hover {
    background: var(--color-primary);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

/* Footer */
.footer {
    background: #0c1322;
}