/* ============================================================
   BASE.CSS — EcoBuild Studio
   Reset, CSS Variables, Typography, Theme (Light/Dark)
   ============================================================ */

/* ---------- CSS RESET ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Fluid root font: 16px at 375px → 18px at 1440px → 20px at 2560px */
    font-size: clamp(15px, 0.875rem + 0.25vw, 20px);
}

body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Remove default styles */
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select {
    font: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
}
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }

/* ---------- CSS VARIABLES — LIGHT THEME (Default) ---------- */
:root,
[data-theme="light"] {
    /* ---- Color Palette ---- */
    --clr-primary:        #1B6B4A;
    --clr-primary-light:  #28A06C;
    --clr-primary-dark:   #0F4A32;
    --clr-primary-rgb:    27, 107, 74;

    --clr-secondary:      #C8A26E;
    --clr-secondary-light:#DDBF8E;
    --clr-secondary-dark: #A07C48;
    --clr-secondary-rgb:  200, 162, 110;

    --clr-accent:         #E8734A;
    --clr-accent-light:   #F09A7A;
    --clr-accent-dark:    #C25530;
    --clr-accent-rgb:     232, 115, 74;

    /* ---- Neutrals ---- */
    --clr-white:          #FFFFFF;
    --clr-black:          #0A0A0A;
    --clr-bg:             #F8F6F1;
    --clr-bg-alt:         #EFECE4;
    --clr-bg-card:        #FFFFFF;
    --clr-bg-glass:       rgba(255, 255, 255, 0.65);
    --clr-surface:        #FFFFFF;
    --clr-surface-hover:  #F0EDE5;

    --clr-text:           #1C2B1F;
    --clr-text-secondary: #55695A;
    --clr-text-muted:     #8A9B8E;
    --clr-text-inverse:   #FFFFFF;

    --clr-border:         #D8D3C8;
    --clr-border-light:   #E8E4DA;
    --clr-divider:        #E0DCD3;

    /* ---- Overlay ---- */
    --clr-overlay:        rgba(10, 10, 10, 0.55);
    --clr-overlay-light:  rgba(10, 10, 10, 0.30);
    --clr-overlay-heavy:  rgba(10, 10, 10, 0.75);

    /* ---- Status Colors ---- */
    --clr-success:        #22A867;
    --clr-warning:        #E5A832;
    --clr-error:          #D94444;
    --clr-info:           #3B82D6;

    /* ---- Typography ---- */
    --ff-heading: 'Playfair Display', 'Georgia', serif;
    --ff-body:    'DM Sans', 'Segoe UI', sans-serif;
    --ff-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Fluid font sizes using clamp */
    --fs-display:   clamp(2.75rem, 2rem + 3vw, 5.5rem);
    --fs-h1:        clamp(2.25rem, 1.75rem + 2vw, 4rem);
    --fs-h2:        clamp(1.75rem, 1.35rem + 1.5vw, 3rem);
    --fs-h3:        clamp(1.35rem, 1.1rem + 1vw, 2.25rem);
    --fs-h4:        clamp(1.15rem, 1rem + 0.5vw, 1.625rem);
    --fs-h5:        clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    --fs-h6:        clamp(0.9rem, 0.875rem + 0.15vw, 1.1rem);
    --fs-base:      1rem;
    --fs-lg:        1.125rem;
    --fs-sm:        0.875rem;
    --fs-xs:        0.75rem;
    --fs-xxs:       0.625rem;

    /* Line Heights */
    --lh-tight:     1.2;
    --lh-snug:      1.35;
    --lh-normal:    1.6;
    --lh-relaxed:   1.75;
    --lh-loose:     2;

    /* Font Weights */
    --fw-light:     300;
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;
    --fw-black:     900;

    /* Letter Spacing */
    --ls-tight:    -0.02em;
    --ls-normal:    0;
    --ls-wide:      0.04em;
    --ls-wider:     0.08em;
    --ls-widest:    0.14em;

    /* ---- Spacing Scale ---- */
    --space-3xs:    clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
    --space-2xs:    clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem);
    --space-xs:     clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
    --space-sm:     clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
    --space-md:     clamp(1rem, 0.8rem + 0.75vw, 1.5rem);
    --space-lg:     clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    --space-xl:     clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
    --space-2xl:    clamp(2.75rem, 2rem + 2.25vw, 5rem);
    --space-3xl:    clamp(3.5rem, 2.5rem + 3vw, 7rem);
    --space-4xl:    clamp(5rem, 3.5rem + 4.5vw, 10rem);

    /* Section vertical padding */
    --section-py:   clamp(4rem, 3rem + 4vw, 8rem);

    /* ---- Border Radius ---- */
    --radius-sm:    0.375rem;
    --radius-md:    0.625rem;
    --radius-lg:    1rem;
    --radius-xl:    1.5rem;
    --radius-2xl:   2rem;
    --radius-full:  9999px;

    /* ---- Shadows ---- */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:    0 2px 6px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg:    0 8px 30px rgba(0,0,0,0.10);
    --shadow-xl:    0 16px 50px rgba(0,0,0,0.14);
    --shadow-2xl:   0 24px 70px rgba(0,0,0,0.18);
    --shadow-inner: inset 0 2px 6px rgba(0,0,0,0.06);
    --shadow-glow:  0 0 30px rgba(var(--clr-primary-rgb), 0.25);

    /* ---- Transitions ---- */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:     0.2s;
    --dur-normal:   0.35s;
    --dur-slow:     0.5s;
    --dur-slower:   0.7s;
    --transition:   all var(--dur-normal) var(--ease-out);

    /* ---- Z-Index Scale ---- */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-popover:    500;
    --z-tooltip:    600;
    --z-preloader:  9999;

    /* ---- Glassmorphism ---- */
    --glass-bg:         rgba(255,255,255,0.55);
    --glass-border:     rgba(255,255,255,0.35);
    --glass-blur:       16px;

    /* ---- Header ---- */
    --header-height:    80px;
    --header-bg:        transparent;
    --header-bg-scroll: rgba(255,255,255,0.92);
}

/* ---------- DARK THEME ---------- */
[data-theme="dark"] {
    --clr-primary:        #3BD88A;
    --clr-primary-light:  #6EEAAA;
    --clr-primary-dark:   #1B8B55;
    --clr-primary-rgb:    59, 216, 138;

    --clr-secondary:      #D4AE72;
    --clr-secondary-light:#E4C99A;
    --clr-secondary-dark: #B08A4E;
    --clr-secondary-rgb:  212, 174, 114;

    --clr-accent:         #F09A7A;
    --clr-accent-light:   #F5B8A0;
    --clr-accent-dark:    #D67550;
    --clr-accent-rgb:     240, 154, 122;

    --clr-bg:             #0C1A12;
    --clr-bg-alt:         #12261A;
    --clr-bg-card:        #162E1F;
    --clr-bg-glass:       rgba(12, 26, 18, 0.7);
    --clr-surface:        #1A3524;
    --clr-surface-hover:  #1E3F2C;

    --clr-text:           #E4EDE7;
    --clr-text-secondary: #A3BCA9;
    --clr-text-muted:     #6B8A72;
    --clr-text-inverse:   #0C1A12;

    --clr-border:         #2A4D35;
    --clr-border-light:   #1E3A28;
    --clr-divider:        #243D2E;

    --clr-overlay:        rgba(0,0,0,0.60);
    --clr-overlay-light:  rgba(0,0,0,0.35);
    --clr-overlay-heavy:  rgba(0,0,0,0.80);

    --shadow-xs:    0 1px 2px rgba(0,0,0,0.20);
    --shadow-sm:    0 2px 6px rgba(0,0,0,0.25);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.30);
    --shadow-lg:    0 8px 30px rgba(0,0,0,0.35);
    --shadow-xl:    0 16px 50px rgba(0,0,0,0.40);
    --shadow-2xl:   0 24px 70px rgba(0,0,0,0.50);
    --shadow-inner: inset 0 2px 6px rgba(0,0,0,0.25);
    --shadow-glow:  0 0 30px rgba(var(--clr-primary-rgb), 0.20);

    --glass-bg:         rgba(22,46,31,0.60);
    --glass-border:     rgba(59,216,138,0.12);
    --glass-blur:       18px;

    --header-bg-scroll: rgba(12,26,18,0.92);
}

/* ---------- TYPOGRAPHY BASE ---------- */
h1, .h1 {
    font-family: var(--ff-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--clr-text);
}
h2, .h2 {
    font-family: var(--ff-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--clr-text);
}
h3, .h3 {
    font-family: var(--ff-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--clr-text);
}
h4, .h4 {
    font-family: var(--ff-heading);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--clr-text);
}
h5, .h5 {
    font-family: var(--ff-body);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--clr-text);
}
h6, .h6 {
    font-family: var(--ff-body);
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--clr-text-secondary);
}

p {
    margin-bottom: var(--space-sm);
    color: var(--clr-text-secondary);
    line-height: var(--lh-normal);
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--fw-bold); }
em, i { font-style: italic; }
small { font-size: var(--fs-sm); }

a {
    color: var(--clr-primary);
    transition: color var(--dur-fast) ease;
}
a:hover { color: var(--clr-primary-dark); }
[data-theme="dark"] a:hover { color: var(--clr-primary-light); }

/* ---------- SELECTION ---------- */
::selection {
    background-color: var(--clr-primary);
    color: var(--clr-white);
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--clr-bg-alt);
}
::-webkit-scrollbar-thumb {
    background: var(--clr-primary);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--clr-primary-dark);
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--clr-primary) var(--clr-bg-alt);
}

/* ---------- FOCUS STYLES ---------- */
:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ---------- IMAGE PLACEHOLDER ---------- */
.img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--clr-bg-alt) 0%, var(--clr-border-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-muted);
    font-size: var(--fs-sm);
}

/* ---------- PRELOADER ---------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader);
    background: var(--clr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--clr-border);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
    z-index: calc(var(--z-preloader) - 1);
    width: 0%;
    transition: width 0.1s linear;
}