/* 
 * Creat'N'Scape - Main Stylesheet
 * Version: 1.0.0
 * Description: Variables, Reset, Typography, and Base Styles
 */

:root {
    /* Color Palette - Warm Desert */
    --color-sandstone-light: #F5F2EA;
    --color-sandstone-dark: #E8E4D9;
    --color-charcoal-dark: #1A1A1A;
    --color-charcoal-light: #2D2D2D;

    /* Accents - Adjusted for Contrast */
    --color-terracotta: #B04A15;
    /* Darkened slightly for better text contrast on light bg */
    --color-terracotta-hover: #8F3A10;
    --color-sage: #5F7060;
    /* Darkened significantly for text usage */
    --color-sage-light: #E3E8E4;

    /* Functional Colors */
    --color-text-main: var(--color-charcoal-dark);
    --color-text-muted: #444444;
    /* Darkened from #555 for better readability */
    --color-text-light: #FFFFFF;
    --color-bg-body: var(--color-sandstone-light);
    --color-bg-surface: #FFFFFF;
    --color-border: #D1D1D1;

    /* Hero Images - Light Mode (Day) */
    --bg-hero-home: url('../assets/images/1-home-hero-day.jpeg');
    --bg-hero-residential: url('../assets/images/2-residential-hero-day.jpeg');
    --bg-hero-commercial: url('../assets/images/3-commercial-hero-day.jpeg');
    --bg-hero-str: url('../assets/images/4-str-hero-day.jpeg');
    --bg-hero-builders: url('../assets/images/5-builders-gc-hero-day.jpeg');
    --bg-hero-about: url('../assets/images/6-about-us-hero-day.jpeg');
    --bg-about-landscape: url('../assets/images/6-commercial-walkway.jpeg');
    /* Replaced missing png with jpeg */
    --bg-hero-process: url('../assets/images/7-process-hero-day.jpeg');
    --bg-hero-portfolio: url('../assets/images/8-portfolio-hero-day.jpeg');
    --bg-hero-reviews: url('../assets/images/9-reviews-hero-day.jpeg');
    --bg-hero-contact: url('../assets/images/1-home-hero-day.jpeg');
    /* Using Home hero for Contact page */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-main: #F5F5F5;
        --color-text-muted: #CCCCCC;
        /* Lightened for dark mode */
        --color-bg-body: #121212;
        /* Warm Charcoal */
        --color-bg-surface: #1E1E1E;
        --color-border: #333333;

        /* Adjust accents for dark mode */
        --color-terracotta: #E07A48;
        /* Lightened for visibility on dark bg */
        --color-terracotta-hover: #EF9568;
        --color-sage: #8FA390;
        /* Lightened for visibility */

        /* Hero Images - Dark Mode (Evening/Night) */
        --bg-hero-home: url('../assets/images/1-home-hero-night.jpeg');
        --bg-hero-residential: url('../assets/images/2-residential-hero-night.jpeg');
        --bg-hero-commercial: url('../assets/images/3-commercial-hero-night.jpeg');
        --bg-hero-str: url('../assets/images/4-str-hero-night.jpeg');
        --bg-hero-builders: url('../assets/images/5-builders-gc-hero-night.jpeg');
        --bg-hero-about: url('../assets/images/6-about-us-hero-night.jpeg');
        --bg-about-landscape: url('../assets/images/6-commercial-walkway.jpeg');
        /* No night version for this specific one yet, or use same */
        --bg-hero-process: url('../assets/images/7-process-hero-night.jpeg');
        --bg-hero-portfolio: url('../assets/images/8-portfolio-hero-night.jpeg');
        --bg-hero-reviews: url('../assets/images/9-reviews-hero-night.jpeg');
        --bg-hero-contact: url('../assets/images/1-home-hero-night.jpeg');
    }
}

/* Background Image Utilities */
.bg-img-home {
    background-image: var(--bg-hero-home);
}

.bg-img-residential {
    background-image: var(--bg-hero-residential);
}

.bg-img-commercial {
    background-image: var(--bg-hero-commercial);
}

.bg-img-str {
    background-image: var(--bg-hero-str);
}

.bg-img-builders {
    background-image: var(--bg-hero-builders);
}

.bg-img-about {
    background-image: var(--bg-hero-about);
}

.bg-img-about-landscape {
    background-image: var(--bg-about-landscape);
}

.bg-img-process {
    background-image: var(--bg-hero-process);
}

.bg-img-portfolio {
    background-image: var(--bg-hero-portfolio);
}

.bg-img-reviews {
    background-image: var(--bg-hero-reviews);
}

.bg-img-contact {
    background-image: var(--bg-hero-contact);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-main);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: var(--spacing-sm);
    max-width: 70ch;
}

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

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Responsive Typography */
@media (min-width: 768px) {
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 1.75rem;
    }
}