/* Zero Pro Modern Design System */
:root {
    /* Core Palette (from ZEROpro logo) */
    --green-700: #4F5725; /* deep olive */
    --green-600: #5A6424; /* olive dark */
    --green-500: #687130; /* primary olive */
    --green-400: #77803A; /* leaf mid */
    --green-300: #8A944E; /* leaf light */
    --green-200: #A7B074; /* pastel olive */
    --green-100: #DCE1C3; /* pale olive tint */

    --neutral-900: #0F1411;
    --neutral-800: #1A211D;
    --neutral-700: #2A322E;
    --neutral-600: #3E4742;
    --neutral-500: #647067;
    --neutral-400: #8B968D;
    --neutral-300: #B6BEB8;
    --neutral-200: #D7DDD8;
    --neutral-100: #EEF1EF;
    --white: #FFFFFF;

    /* Semantic tokens */
    --primary-700: var(--green-700);
    --primary-600: var(--green-600);
    --primary-500: var(--green-500);
    --primary-400: var(--green-400);
    --primary-300: var(--green-300);
    --accent-500: var(--green-400);

    --bg: var(--white);
    --fg: var(--neutral-900);
    --muted: var(--neutral-500);
    --card: var(--white);
    --surface: var(--neutral-100);
    --border: var(--neutral-200);
    --ring: var(--primary-300);

    /* Radii & Shadows */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 2px 10px rgba(15,20,17,0.06);
    --shadow-md: 0 8px 24px rgba(15,20,17,0.08);
    --shadow-lg: 0 16px 44px rgba(15,20,17,0.10);

    /* Typography */
    --font-display: 'Playfair Display', serif;
    --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --h1:  clamp(2.2rem, 4vw, 4.25rem);
    --h2:  clamp(1.8rem, 3vw, 3.25rem);
    --h3:  clamp(1.4rem, 2.5vw, 2.25rem);
    --h4:  clamp(1.2rem, 2vw, 1.6rem);
    --body: 1rem;
    --lead: 1.125rem;
}

@media (prefers-color-scheme: dark) {
    :root.dark {
        --bg: #0E120F;
        --fg: #E7ECE8;
        --muted: #A9B3AB;
        --card: #131814;
        --surface: #171D18;
        --border: #26302A;
        --ring: var(--primary-600);
        --shadow-sm: 0 2px 10px rgba(0,0,0,0.25);
        --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
        --shadow-lg: 0 16px 44px rgba(0,0,0,0.45);
    }
}

/* Global base */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-display { font-family: var(--font-display); }

h1 { font-size: var(--h1); line-height: 1.1; }
h2 { font-size: var(--h2); line-height: 1.15; }
h3 { font-size: var(--h3); line-height: 1.2; }
h4 { font-size: var(--h4); line-height: 1.25; }
p  { font-size: var(--body); }
.lead { font-size: var(--lead); color: var(--muted); }

/* Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: transform .15s ease, box-shadow .25s ease, background-color .2s ease;
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--primary-500); color: white; border-color: var(--primary-600); }
.btn-primary:hover { background: var(--primary-600); }
.btn-outline { background: transparent; color: var(--primary-600); border-color: var(--primary-300); }
.btn-outline:hover { background: var(--surface); }
.btn-soft { background: var(--green-100); color: var(--primary-600); border-color: var(--green-200); }
.btn-soft:hover { background: var(--green-200); }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.input, .select, .textarea {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .65rem .8rem;
    color: var(--fg);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 25%, transparent);
}

.navbar {
    background: color-mix(in oklab, var(--card) 94%, var(--primary-100) 6%);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(1.1) blur(6px);
}
.footer {
    background: var(--neutral-900);
    color: #DDE3DD;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.hero-gradient {
    background: radial-gradient(1200px 600px at 10% 10%, color-mix(in oklab, var(--green-100) 45%, transparent) 0%, transparent 55%),
                radial-gradient(1000px 500px at 90% 5%, color-mix(in oklab, var(--green-200) 25%, transparent) 0%, transparent 60%),
                linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--green-100) 20%, var(--bg)) 100%);
}

.section {
    padding: 4rem 0;
    background: var(--bg);
}
.section-alt {
    padding: 4rem 0;
    background: color-mix(in oklab, var(--green-100) 10%, var(--bg));
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: color-mix(in oklab, var(--green-100) 60%, white);
    border: 1px solid var(--green-200);
    color: var(--primary-600);
    border-radius: 999px;
    padding: .35rem .75rem;
    font-size: .825rem;
}

.soft-shadow { box-shadow: var(--shadow-sm); }
.elevated { box-shadow: var(--shadow-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }