:root {
    /* Reference Image Theme */
    --green-50: #fbfaf6;
    /* Cream background */
    --green-100: #edf1ee;
    /* Very light sage green for tags */
    --green-200: #dce5e0;
    /* Borders */
    --green-300: #b5c7bc;
    --green-400: #88a798;
    --green-500: #57846f;
    --green-600: #356752;
    --green-700: #2d5c48;
    /* Button green base */
    --green-800: #1b362c;
    /* Button hover dark */
    --green-900: #1a1e3a;
    /* Deep navy used for titles in ref */

    /* Neutrals */
    --light-bg: #fbfaf6;
    /* Creamy off-white background */
    --dark-text: #1a1e3a;
    /* Navy text color for main headings */
    --text-muted: #3a3f58;
    /* Muted navy/purple text color for descriptions */
    --surface: #ffffff;
    /* White cards */

    /* Typography */
    --font-heading: 'Lora', serif;
    --font-body: 'Nunito', sans-serif;

    /* FX */
    --shadow-sm: 0 3.472px 10.417px rgba(45, 92, 72, 0.05);
    /* Soft sage shadow */
    --shadow-md: 0 8.68px 20.833px -3.472px rgba(45, 92, 72, 0.08);
    --shadow-lg: 0 17.361px 41.667px -8.68px rgba(45, 92, 72, 0.12);
    --shadow-glow: 0 10.417px 26.042px rgba(45, 92, 72, 0.25);

    --radius-sm: 10.417px;
    --radius-md: 13.889px;
    --radius-lg: 17.361px;
    --radius-xl: 24.305px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--dark-text);
    background: var(--light-bg);
    /* In the reference image, the background is a solid cream color with a subtle noise texture. We'll use a very subtle radial gradient just to warm it up. */
    background-image:
        radial-gradient(circle at 10% 10%, #ffffff 0%, transparent 60%),
        radial-gradient(circle at 90% 90%, var(--green-100) 0%, transparent 60%);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
}

img,
video {
    max-width: 100%;
    border-radius: var(--radius-md);
}

a {
    text-decoration: none;
    font-family: inherit;
}