:root {
    /* Primary Colors */
    --color-primary: #459900;
    --color-primary-dark: #2f6900;
    --color-primary-light: #6bbf26;
    --color-headings: #22a302;
    --color-menu-bg: rgba(0, 163, 11, 0.80);
    --color-green-gradient-start: rgba(120, 204, 51, 0.94);
    --color-green-gradient-end: rgba(69, 153, 0, 0.85);

    /* Neutrals */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #555555;
    --color-text-light: #777777;
    --color-border: #e5e5e5;
    --color-bg: #ffffff;
    --color-bg-alt: #f5f5f5;
    --color-overlay-dark: rgba(0, 0, 0, 0.45);
    --color-overlay-light: rgba(0, 0, 0, 0.20);

    /* Typography */
    --font-family: 'Open Sans', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-h1: 28px;
    --font-size-h2: 22px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --line-height-base: 1.6;

    /* Layout */
    --container-width: 960px;
    --container-padding: 15px;
    --grid-gutter: 20px;
    --section-spacing: 40px;

    /* Borders & Radius */
    --border-radius: 4px;
    --border-radius-lg: 8px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.20);

    /* Z-index layers */
    --z-nav: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-back-to-top: 50;
}