:root {
    /* Colors - Design tokens for eet */
    --color-primary: #13ec5b;
    --color-primary-dark: #10c74d;
    /* Slightly darker for hover */
    --color-background: #f6f8f6;
    /* background-light */
    --color-background-dark: #102216;
    /* background-dark */
    --color-forest-dark: #0d1b12;
    /* forest-dark */
    --color-forest: #1b3a26;
    /* forest */

    --color-text: #0d1b12;
    /* Default text is dark */
    --color-text-light: rgba(13, 27, 18, 0.7);
    --color-text-inverse: #ffffff;
    --color-text-inverse-light: rgba(255, 255, 255, 0.6);

    --color-border: rgba(255, 255, 255, 0.1);
    --color-surface: #ffffff;
    --color-surface-dark: rgba(255, 255, 255, 0.05);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 3rem;
    --space-xxl: 6rem;

    /* Typography */
    --font-family-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 2rem;
    --font-size-display: 3.5rem;
    /* For hero headings */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Border Radius */
    --radius-sm: 0.5rem;
    /* rounded-DEFAULT / rounded-lg in tailwind depending on config, here we align with visual rounded-lg */
    --radius-md: 1rem;
    /* rounded-xl */
    --radius-lg: 1.5rem;
    /* rounded-2xl or 3xl */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}