/*
 * THEME: Forest
 * An organic, natural theme with deep greens and earthy tones.
 * Inspired by moss, ferns, and old-growth forests.
 */

:root {
    /* Colors - Primary (Forest Green) */
    --color-primary: #15803d;
    --color-primary-light: #22c55e;
    --color-primary-dark: #166534;

    /* Colors - Accent (Amber/Gold) */
    --color-accent: #ca8a04;
    --color-accent-light: #eab308;
    --color-accent-dark: #a16207;

    /* Colors - Background (Warm Off-White with green undertone) */
    --color-bg: #fafdf7;
    --color-bg-alt: #f0f7eb;
    --color-bg-elevated: #ffffff;

    /* Colors - Text */
    --color-text: #14532d;
    --color-text-muted: #3f6212;
    --color-text-inverse: #fafdf7;

    /* Colors - Border & Dividers */
    --color-border: #d1e7c0;
    --color-border-strong: #a3d977;

    /* Typography - Natural, organic feel */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Border Radius - Mix of organic and structured */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows - Soft, natural */
    --shadow-sm: 0 1px 3px rgba(21, 128, 61, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(21, 128, 61, 0.1), 0 2px 4px -2px rgba(21, 128, 61, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(21, 128, 61, 0.12), 0 4px 6px -4px rgba(21, 128, 61, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(21, 128, 61, 0.15), 0 8px 10px -6px rgba(21, 128, 61, 0.1);

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

    /* Component Specific */
    --card-bg: #ffffff;
    --card-border: #d1e7c0;
    --card-shadow: var(--shadow-md);
    --btn-radius: 8px;

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

/* Add subtle organic texture to background */
body {
    background-image:
            radial-gradient(circle at 20% 50%, rgba(21, 128, 61, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(132, 204, 22, 0.03) 0%, transparent 50%);
}

/* Navigation */
.nav {
    background: rgba(250, 253, 247, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hero */
.hero__shape {
    filter: blur(100px);
    opacity: 0.15;
}

/* Buttons */
.btn--primary {
    background: var(--color-primary);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
}

.btn--secondary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--secondary:hover {
    background: #ecfdf5;
}

/* Nav CTA */
.nav__cta {
    background: var(--color-primary);
}

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

/* Testimonial - Deep forest gradient */
.testimonial {
    background: linear-gradient(135deg, #166534 0%, #14532d 50%, #052e16 100%);
}

/* Project placeholders - Layered greens */
.project-card__placeholder {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 50%, #166534 100%);
}

/* Service card styling */
.service-card__icon {
    background: #ecfdf5;
    border: 1px solid var(--color-border);
}

.service-card:hover {
    border-color: var(--color-primary);
    background: #f7fdf4;
}

/* Stats - Gradient text */
.stat__number {
    background: linear-gradient(135deg, var(--color-primary) 0%, #84cc16 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* About section */
.about {
    background: linear-gradient(180deg, #f0f7eb 0%, #fafdf7 100%);
}

/* Work section */
.work {
    background: #f0f7eb;
}

/* Project cards */
.project-card {
    background: #ffffff;
}

.project-card:hover {
    border-color: var(--color-primary-light);
}

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

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

/* Footer - Earthy */
.footer {
    background: #e8f5df;
    border-color: var(--color-border);
}

/* Contact email */
.contact__email {
    color: var(--color-primary);
}

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

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

/* Logo mark */
.nav__logo-mark {
    color: var(--color-primary);
}