/* =========================================
   THEME SYSTEM - Semantic Variables
   Defines "Warm Sun" (Light) and "Silver Night" (Dark)
   ========================================= */

:root {
    /* =========================================
     1. BASE PALETTE DEFINITIONS
     ========================================= */

    /* Warm Sun Palette (Light Mode Base) */
    --palette-sun-brown-dark: #5a3214;
    --palette-sun-brown-mid: #8B6F47;
    --palette-sun-brown-light: #a89073;
    --palette-sun-amber: #d53f8c;
    /* Updated to avoid yellow-brown, using warm pink/amber */
    --palette-sun-gold: #d4923f;
    --palette-sun-cream: #FFF8F0;
    --palette-sun-sand: #FAF3E8;
    --palette-sun-sky-blue: #87CEEB;
    --palette-sun-sky-peach: #FFE4B5;

    /* Silver Night Palette (Dark Mode Base) */
    --palette-night-black: #060912;
    --palette-night-blue: #0f1629;
    --palette-night-silver: #eef2ff;
    --palette-night-slate: #cbd5e1;
    --palette-night-accent: #c4d7ff;
    --palette-night-accent-2: #8cb6ff;

    /* =========================================
     2. SEMANTIC VARIABLES (The Interface)
     ========================================= */
    /* Default to Light Mode (Warm Sun) */
    --bg-page: linear-gradient(180deg, var(--palette-sun-sky-blue) 0%, #B8E0F5 15%, #FFD9B8 40%, var(--palette-sun-sky-peach) 60%, var(--palette-sun-cream) 85%, var(--palette-sun-sand) 100%);
    --bg-page-flat: var(--palette-sun-cream);
    --bg-card: rgba(255, 255, 255, 0.2);
    /* Transparent glass */
    --bg-header: rgba(255, 255, 255, 0.2);
    --bg-footer: linear-gradient(165deg, rgba(250, 243, 232, 0.6) 0%, rgba(255, 248, 240, 0.8) 40%, rgba(250, 243, 232, 0.6) 70%, rgba(245, 238, 227, 0.6) 100%);

    --text-main: var(--palette-sun-brown-dark);
    --text-secondary: var(--palette-sun-brown-mid);
    --text-muted: var(--palette-sun-brown-light);

    --accent-primary: var(--palette-sun-gold);
    --accent-secondary: #e8a960;
    --accent-button-bg: linear-gradient(135deg, #d97706, #e8a960);
    --accent-button-text: #ffffff;

    --border-subtle: rgba(255, 255, 255, 0.4);
    --border-focus: var(--palette-sun-gold);

    --shadow-card: 0 8px 32px rgba(139, 111, 71, 0.08), 0 2px 8px rgba(139, 111, 71, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --shadow-glow: 0 4px 12px rgba(217, 119, 6, 0.25);

    --glass-border: rgba(255, 255, 255, 0.3);

    /* Premium Effects - Warm Sun */
    --btn-neomorphic-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
    --btn-neomorphic-border: rgba(255, 255, 255, 0.5);
    --btn-neomorphic-shadow: 8px 8px 16px rgba(139, 111, 71, 0.08), -8px -8px 16px rgba(255, 255, 255, 0.5);
    --btn-neomorphic-shadow-hover: 10px 10px 20px rgba(139, 111, 71, 0.12), -10px -10px 20px rgba(255, 255, 255, 0.6);
    --btn-neomorphic-text: #2a2a30;

    --sun-glow-bg: radial-gradient(circle at center, rgba(255, 220, 100, 0.9) 0%, rgba(255, 200, 120, 0.6) 30%, rgba(255, 230, 150, 0.3) 60%, transparent 100%);
    --moon-glow-bg: none;
    --wave-gradient: linear-gradient(0deg, rgba(40, 120, 180, 0.9) 0%, rgba(80, 160, 220, 0.6) 40%, rgba(140, 200, 240, 0.3) 70%, transparent 100%);
    --wave-ripple-1: radial-gradient(ellipse at bottom, rgba(60, 140, 200, 0.6) 0%, transparent 60%);
    --wave-ripple-2: radial-gradient(ellipse at bottom, rgba(80, 160, 220, 0.5) 0%, transparent 70%);
    /* Vibrant Beach Overlay - Warm Sun */
    --beach-overlay: linear-gradient(180deg,
            rgba(135, 206, 235, 0.4) 0%,
            /* Sky Blue */
            rgba(176, 224, 230, 0.4) 25%,
            /* Powder Blue */
            rgba(255, 228, 181, 0.4) 50%,
            /* Moccasin/Sand */
            rgba(255, 248, 220, 0.5) 75%,
            /* Cornsilk/Sand */
            rgba(255, 250, 240, 0.6) 100%
            /* Floral White */
        );

    --testimonial-header-bg: rgba(255, 255, 255, 0.15);
}

/* =========================================
   3. DARK THEME OVERRIDES (Silver Night)
   ========================================= */

[data-theme="dark"] {
    --bg-page: var(--palette-night-black);
    /* Fallback */
    --bg-page: radial-gradient(ellipse at 20% 10%, rgba(80, 120, 180, 0.12) 0%, transparent 45%),
                radial-gradient(circle at 80% 20%, rgba(100, 140, 200, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 40% 60%, rgba(60, 100, 160, 0.06) 0%, transparent 35%),
                radial-gradient(circle at 90% 80%, rgba(90, 130, 190, 0.1) 0%, transparent 45%),
                radial-gradient(circle at 10% 90%, rgba(70, 110, 170, 0.07) 0%, transparent 40%),
                linear-gradient(180deg,
                    #020408 0%,
                    #050a15 15%,
                    #0a0f1e 35%,
                    #060d1a 55%,
                    #040810 75%,
                    #060912 100%);
    --bg-page-flat: var(--palette-night-black);
    --bg-card: rgba(20, 25, 40, 0.3);
    /* Even more transparent dark */
    /* Slightly more opaque for contrast */
    --bg-header: rgba(6, 9, 18, 0.5);
    --bg-footer: linear-gradient(180deg, rgba(13, 18, 33, 0.8) 0%, rgba(5, 8, 16, 0.9) 100%);

    --text-main: var(--palette-night-silver);
    --text-secondary: var(--palette-night-slate);
    --text-muted: rgba(203, 213, 225, 0.6);

    --accent-primary: var(--palette-night-accent);
    --accent-secondary: var(--palette-night-accent-2);
    --accent-button-bg: linear-gradient(135deg, var(--palette-night-accent), var(--palette-night-accent-2));
    --accent-button-text: #060912;

    --border-subtle: rgba(140, 182, 255, 0.15);
    --border-focus: var(--palette-night-accent);

    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-glow: 0 0 20px rgba(140, 182, 255, 0.15);

    --glass-border: rgba(255, 255, 255, 0.08);

    /* Premium Effects - Silver Night */
    --btn-neomorphic-bg: linear-gradient(145deg, #1a2035, #121625);
    --btn-neomorphic-border: rgba(140, 182, 255, 0.1);
    --btn-neomorphic-shadow: 8px 8px 20px rgba(0, 0, 0, 0.6), -4px -4px 12px rgba(255, 255, 255, 0.02), inset 1px 1px 2px rgba(255, 255, 255, 0.05), inset -1px -1px 2px rgba(0, 0, 0, 0.3);
    --btn-neomorphic-shadow-hover: 10px 10px 25px rgba(0, 0, 0, 0.7), -5px -5px 15px rgba(255, 255, 255, 0.03), inset 1px 1px 3px rgba(255, 255, 255, 0.08), inset -1px -1px 3px rgba(0, 0, 0, 0.4), 0 0 20px rgba(140, 182, 255, 0.15);
    --btn-neomorphic-text: #f5f5f7;

    --sun-glow-bg: none;
    --moon-glow-bg: radial-gradient(circle at center, rgba(200, 220, 255, 0.25) 0%, rgba(160, 190, 240, 0.15) 30%, rgba(140, 170, 220, 0.05) 60%, transparent 100%);
    --wave-gradient: linear-gradient(0deg, rgba(10, 20, 40, 0.95) 0%, rgba(20, 35, 65, 0.8) 40%, rgba(30, 45, 75, 0.4) 70%, transparent 100%);
    --wave-ripple-1: radial-gradient(ellipse at bottom, rgba(30, 50, 90, 0.5) 0%, transparent 60%);
    --wave-ripple-2: radial-gradient(ellipse at bottom, rgba(40, 60, 100, 0.4) 0%, transparent 70%);

    /* Deep Night Sea Gradient */
    --beach-overlay: linear-gradient(180deg,
            rgba(5, 8, 16, 0.95) 0%,
            rgba(10, 15, 30, 0.85) 40%,
            rgba(20, 35, 60, 0.8) 100%);

    --testimonial-header-bg: rgba(140, 182, 255, 0.1);
}

/* =========================================
   4. COMPONENT MAPPINGS
   Using semantic variables exclusively
   ========================================= */

body {
    background: var(--bg-page);
    color: var(--text-main);
    background-attachment: fixed;
}

/* Headings & Text */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title {
    color: var(--text-main);
}

/* Hero Title - Allow wrapping for long text */
.hero-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    /* Slightly smaller to fit better */
    line-height: 1.15;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

p,
li,
.subtitle {
    color: var(--text-secondary);
}

.small-text,
.meta-text {
    color: var(--text-muted);
}

/* Links */
a {
    color: var(--accent-primary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-secondary);
}

/* Buttons */
.btn.primary {
    background: var(--accent-button-bg);
    color: var(--accent-button-text);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-glow);
}

.btn.secondary {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

/* Cards */
.card,
.case-card,
.work-card,
.philosophy-item,
.testimonial-card,
.insight-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-main);
}

/* Header & Footer */
.site-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(12px);
}

.site-footer {
    background: var(--bg-footer);
    border-top: 1px solid var(--border-subtle);
}

/* Footer Specific Overrides */
/* Ensure text in footer is brown even if inheriance is messed up */
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer strong {
    color: var(--text-main) !important;
}

.site-footer p,
.site-footer span,
.site-footer a,
.site-footer li,
.footer-tagline {
    color: var(--text-secondary) !important;
}

.site-footer a:hover {
    color: var(--accent-primary) !important;
}

/* CTA Section */
.cta-section {
    background: transparent;
    /* Fix phantom background issue */
}

.cta-container {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
}

/* Inputs */
input,
textarea,
select {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

input:focus,
textarea:focus {
    border-color: var(--border-focus);
    outline: none;
}

/* Tags & Badges */
.badge,
.tag,
.pill,
.case-tag,
.case-horizontal-tag {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    border-radius: 999px;
    padding: 0.25em 0.75em;
}

/* Footer Internal Elements */
.footer-brand .brand-mark,
.footer-social a {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

.footer-social a:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
}

/* Special Dark Mode Overrides (Silver Text for "What I'm best at") */
[data-theme="dark"] .philosophy-section h2,
[data-theme="dark"] .philosophy-item h3,
[data-theme="dark"] .philosophy-item p,
[data-theme="dark"] .section-title,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .case-card h3,
[data-theme="dark"] .case-card p,
[data-theme="dark"] em,
[data-theme="dark"] strong {
    color: var(--palette-night-silver) !important;
}

[data-theme="dark"] .philosophy-item {
    color: var(--palette-night-slate) !important;
}

/* Removing unwanted background tints on structures */
section,
.section,
div[class*="-section"] {
    background-color: transparent !important;
    /* Ensure gradient shows through */
}

/* Testimonial Fixes - Corner Clipping & Brown Bleed */
.testimonial-card-mini {
    background: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    /* Ensure clipping works */
}

/* Fix the header background and corners */
.testimonial-skill {
    background: var(--testimonial-header-bg) !important;
    color: var(--text-secondary) !important;
    border-radius: 28px 28px 0 0 !important;
    /* Match parent corners */
    margin: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

[data-theme="dark"] .testimonial-skill strong {
    color: var(--palette-night-accent) !important;
}

/* Fix "What I'm best at" Highlight in Dark Mode */
[data-theme="dark"] .philosophy-item.active {
    box-shadow: 0 0 30px rgba(140, 182, 255, 0.15), inset 0 0 20px rgba(140, 182, 255, 0.05) !important;
    border-color: var(--palette-night-accent) !important;
}

/* Override any remaining gold text spans */
[data-theme="dark"] span[style*="color"] {
    color: var(--palette-night-accent) !important;
}

/* =========================================
   5. RESPONSIVE POLISH
   Ensuring UX is solid on mobile devices
   ========================================= */

@media (max-width: 768px) {

    /* Hero Card - Safer Padding for Mobile */
    .hero-card {
        padding: 130px 24px 48px 24px !important;
        /* increased top padding to clear sticky flag */
    }

    /* Hero Title - Safer Sizing for Mobile */
    .hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
        /* Smaller min/max for mobile */
    }

    /* Testimonial Cards - Prevent "squished" feel */
    .testimonial-card-mini {
        padding: 24px !important;
        min-height: auto !important;
    }

    /* "Top recommended skill" header mobile adjustment */
    .testimonial-skill {
        font-size: 0.7rem !important;
        padding: 10px 16px !important;
    }
}