:root {
    /* ---- Brand palette ---- */
    --color-primary: #123524;
    --color-secondary: #1E5E3B;
    --color-accent: #3BAA57;
    --color-bg: #F8FAF7;
    --color-dark: #0D1E15;
    --color-text: #111111;
    --color-light-gray: #E8ECE8;
    --color-white: #FFFFFF;

    --color-primary-rgb: 18, 53, 36;
    --color-accent-rgb: 59, 170, 87;
    --color-dark-rgb: 13, 30, 21;

    /* ---- Typography ---- */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;

    /* ---- Spacing scale ---- */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 9rem;

    /* ---- Radii ---- */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-full: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 2px 8px rgba(13, 30, 21, 0.06);
    --shadow-md: 0 8px 30px rgba(13, 30, 21, 0.08);
    --shadow-lg: 0 20px 60px rgba(13, 30, 21, 0.12);
    --shadow-glow: 0 0 40px rgba(59, 170, 87, 0.35);

    /* ---- Glass ---- */
    --glass-bg: rgba(248, 250, 247, 0.72);
    --glass-bg-dark: rgba(13, 30, 21, 0.6);
    --glass-border: rgba(255, 255, 255, 0.4);

    /* ---- Layout ---- */
    --container-max: 1280px;
    --nav-height: 84px;

    /* ---- Motion ---- */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.25s var(--ease-premium);
    --transition-mid: 0.45s var(--ease-premium);
    --transition-slow: 0.8s var(--ease-premium);
}