/*
 * THEME: Sunrise
 * A warm, optimistic theme with coral/orange accents.
 * Inspired by early morning warmth and golden light.
 */

:root {
    /* Colors - Primary (Coral/Orange) */
    --color-primary: #f97316;
    --color-primary-light: #fb923c;
    --color-primary-dark: #ea580c;

    /* Colors - Accent (Rose) */
    --color-accent: #f43f5e;
    --color-accent-light: #fb7185;
    --color-accent-dark: #e11d48;

    /* Colors - Background (Warm Cream) */
    --color-bg: #fffbf7;
    --color-bg-alt: #fef3eb;
    --color-bg-elevated: #ffffff;

    /* Colors - Text */
    --color-text: #431407;
    --color-text-muted: #9a3412;
    --color-text-inverse: #ffffff;

    /* Colors - Border & Dividers */
    --color-border: #fed7aa;
    --color-border-strong: #fdba74;

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

    /* Border Radius - Softer, more organic */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;

    /* Shadows - Warm tinted */
    --shadow-sm: 0 1px 2px rgba(249, 115, 22, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(249, 115, 22, 0.1), 0 2px 4px -2px rgba(249, 115, 22, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(249, 115, 22, 0.12), 0 4px 6px -4px rgba(249, 115, 22, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(249, 115, 22, 0.15), 0 8px 10px -6px rgba(249, 115, 22, 0.1);

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

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

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

/* Hero shapes - Soft warm blobs */
.hero__shape {
    filter: blur(80px);
    opacity: 0.2;
}

/* Navigation with warm tint */
.nav {
    background: rgba(255, 251, 247, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Buttons - Pill shaped */
.btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
}

.btn--primary:hover {
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}

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

.btn--secondary:hover {
    background: #fff7ed;
    border-color: var(--color-primary);
}

/* CTA in nav */
.nav__cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: 999px;
}

/* Testimonial - Warm gradient */
.testimonial {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
}

/* Project placeholders - Warm gradients */
.project-card__placeholder {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
}

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

/* Service cards - Soft warm hover */
.service-card:hover {
    border-color: var(--color-primary);
    background: #fffcfa;
}

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

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

.contact__social a:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-color: transparent;
}

/* Footer */
.footer {
    background: #fef3eb;
}

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

/* Work section */
.work {
    background: linear-gradient(180deg, #fffbf7 0%, #fef3eb 100%);
}