/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES - Global Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Colors ── */
    /* Primary Green Palette */
    --green:        #2d7a22;
    --green-dark:   #243d1c;
    --green-medium: #3a6e28;
    --green-bright: #5fa63d;
    --green-light:  #d4ecc5;
    --green-pale:   #f1f8eb;
    --green-bg:     #eef7ec;

    /* Neutral Colors */
    --cream:        #fdfcf8;
    --sand:         #e8e2d8;
    --ink:          #18201a;
    --ink-dark:     #111712;
    --ink-medium:   #3a4238;
    --mid:          #6b7d64;
    --mid-gray:     #687268;
    --lite:         #b2c4ab;
    --muted:        #aab5a8;
    --border:       #e2e8e0;

    /* Background Colors */
    --bg:           #ffffff;
    --bg-gray:      #f5f7f4;
    --bg-cream:     #fdfcf8;

    /* Accent Colors */
    --red:          #e03b2e;
    --red-dark:     #d63b2e;
    --gold:         #e9a520;
    --gold-bright:  #f0a500;
    --white:        #fff;

    /* ── Border Radius ── */
    --radius-card:  18px;
    --radius-btn:   11px;
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;

    /* ── Shadows ── */
    --shadow-card:  0 2px 14px rgba(20, 40, 15, .07);
    --shadow-lift:  0 18px 50px rgba(20, 40, 15, .17);
    --shadow-soft:  0 4px 24px rgba(17, 23, 18, .06);
    --shadow-medium: 0 8px 32px rgba(17, 23, 18, .08);
    --shadow-hover: 0 8px 32px rgba(45, 122, 34, .15);

    /* ── Transitions ── */
    --transition:       .22s ease;
    --transition-bounce: .32s cubic-bezier(.22, .68, 0, 1.18);
    --transition-smooth: .35s cubic-bezier(.22, .68, 0, 1.15);

    /* ── Typography ── */
    --font-serif:   'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
    --font-sans:    'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Spacing ── */
    --space-xs:     4px;
    --space-sm:     8px;
    --space-md:     16px;
    --space-lg:     24px;
    --space-xl:     32px;
    --space-2xl:    48px;
    --space-3xl:    64px;
}

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

body {
    font-family: var(--font-sans);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
}