/*
 * THEME: Retro
 * A 70s-inspired theme with warm earth tones.
 * Mustard, rust, cream, and brown palette.
 */

:root {
    /* Colors - Primary (Mustard) */
    --color-primary: #ca8a04;
    --color-primary-light: #eab308;
    --color-primary-dark: #a16207;

    /* Colors - Accent (Rust) */
    --color-accent: #c2410c;
    --color-accent-light: #ea580c;
    --color-accent-dark: #9a3412;

    /* Colors - Background (Warm Cream) */
    --color-bg: #fefce8;
    --color-bg-alt: #fef9c3;
    --color-bg-elevated: #fffef5;

    /* Colors - Text */
    --color-text: #451a03;
    --color-text-muted: #78350f;
    --color-text-inverse: #fefce8;

    /* Colors - Border & Dividers */
    --color-border: #fde68a;
    --color-border-strong: #fcd34d;

    /* Typography - Retro serif */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Space Mono', monospace;

    /* Letter Spacing - Tighter for retro feel */
    --tracking-tight: -0.03em;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.15em;

    /* Border Radius - More rounded, softer */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 40px;

    /* Shadows - Warm brown tinted */
    --shadow-sm: 0 2px 4px rgba(69, 26, 3, 0.08);
    --shadow-md: 0 4px 8px -2px rgba(69, 26, 3, 0.12), 0 2px 4px -2px rgba(69, 26, 3, 0.08);
    --shadow-lg: 0 12px 20px -4px rgba(69, 26, 3, 0.15), 0 4px 8px -4px rgba(69, 26, 3, 0.1);
    --shadow-xl: 0 24px 32px -8px rgba(69, 26, 3, 0.18), 0 8px 12px -6px rgba(69, 26, 3, 0.1);

    /* Hero Shapes */
    --shape-1-bg: var(--color-primary);
    --shape-2-bg: var(--color-accent);
    --shape-3-bg: #854d0e;

    /* Component Specific */
    --card-bg: #fffef5;
    --card-border: #fde68a;
    --card-shadow: var(--shadow-md);
    --btn-radius: 999px;

    /* Section Label */
    --label-color: var(--color-accent);
    --label-tracking: 0.2em;
}

/* Add subtle retro pattern overlay */
body {
    background-image:
            radial-gradient(circle at 25% 25%, rgba(202, 138, 4, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(194, 65, 12, 0.05) 0%, transparent 50%);
}

/* Navigation - Warm cream */
.nav {
    background: rgba(254, 252, 232, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--color-border);
}

/* Hero shapes - Soft blobs */
.hero__shape {
    filter: blur(80px);
    opacity: 0.25;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.hero__shape--1 {
    animation: morphBlob 8s ease-in-out infinite;
}

.hero__shape--2 {
    animation: morphBlob 10s ease-in-out infinite reverse;
}

.hero__shape--3 {
    animation: morphBlob 12s ease-in-out infinite;
}

@keyframes morphBlob {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    25% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
    50% { border-radius: 30% 60% 70% 40% / 60% 30% 70% 40%; }
    75% { border-radius: 70% 30% 50% 50% / 30% 70% 30% 70%; }
}

/* Buttons - Pill shaped with thick borders */
.btn--primary {
    background: var(--color-primary);
    border: 3px solid var(--color-primary-dark);
    box-shadow: 4px 4px 0 var(--color-primary-dark);
}

.btn--primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-primary-dark);
}

.btn--secondary {
    border: 3px solid var(--color-text);
    color: var(--color-text);
    box-shadow: 4px 4px 0 var(--color-text);
}

.btn--secondary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-text);
    background: transparent;
}

/* Nav CTA */
.nav__cta {
    background: var(--color-accent);
    border-radius: 999px;
    border: 2px solid var(--color-accent-dark);
}

.nav__cta:hover {
    background: var(--color-accent-dark);
}

/* Testimonial - Rust gradient */
.testimonial {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 50%, #9a3412 100%);
    border-top: 4px solid var(--color-accent-dark);
    border-bottom: 4px solid var(--color-accent-dark);
}

/* Project placeholders */
.project-card__placeholder {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 50%, #a16207 100%);
}

/* Service cards - Retro card style */
.service-card {
    border: 2px solid var(--color-border-strong);
    box-shadow: 6px 6px 0 var(--color-border-strong);
}

.service-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 var(--color-border-strong);
    border-color: var(--color-primary);
}

.service-card__icon {
    background: var(--color-bg-alt);
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
}

/* Stats */
.stat__number {
    color: var(--color-accent);
    font-weight: 700;
}

/* About section */
.about {
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-border-strong);
    border-bottom: 3px solid var(--color-border-strong);
}

/* Work section */
.work {
    background: var(--color-bg);
}

/* Project cards - Retro style */
.project-card {
    border: 2px solid var(--color-border-strong);
    box-shadow: 6px 6px 0 rgba(69, 26, 3, 0.1);
}

.project-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 rgba(69, 26, 3, 0.15);
}

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

.contact__social a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent-dark);
}

/* Footer */
.footer {
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-border-strong);
}

/* Contact email */
.contact__email {
    color: var(--color-accent);
    border-bottom: 3px solid transparent;
}

.contact__email:hover {
    border-color: var(--color-accent);
}

/* Section titles - Bolder */
.section-title {
    font-weight: 700;
}

/* Hero title */
.hero__title em {
    color: var(--color-accent);
}