:root {
    
    --brand-green: #60b22f;
    --brand-green-50: #AFD897;
    --brand-green-10: #EFF7EA;

    --brand-green-dark: #173d3b;
    --brand-green-dark-50: #8b9e9d;
    --brand-green-dark-10: #E7ECEB;

    --brand-red: #ff3200;
    --brand-red-bg: #ffd1c7;

    --brand-surface: #eef1f2;
    --brand-text: #153634;
    --brand-medium: #6b7d7c;
    --brand-success-dark: #4f9d2c;
    --brand-white: #ffffff;
    --brand-black-deep: #0a0a0a;

    --brand-font-family: 'Hanken Grotesk', "Helvetica Neue", Arial, sans-serif;
    --brand-font-xs: 11px;
    --brand-font-sm: 13px;
    --brand-font-md: 15px;
    --brand-font-lg: 18px;
    --brand-font-xl: 24px;
    --brand-font-2xl: 30px;
    --brand-font-3xl: 34px;
    --brand-font-4xl: 42px;
    --brand-font-hero: 40px;
    --brand-font-price: 72px;

    --brand-padding: 14px;
    --brand-padding-sm: 10px;
    --brand-padding-lg: 18px;
    --brand-section-py: 60px;
    --brand-section-py-lg: 80px;
    --brand-container-max: 1200px;

    --brand-radius: 12px;
    --brand-radius-sm: 8px;
    --brand-radius-xs: 6px;
    --brand-radius-lg: 16px;
    --brand-radius-pill: 999px;

    --brand-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    --brand-shadow-card: 0 8px 24px rgba(17, 52, 50, 0.08);
    --brand-shadow-elevated: 0 10px 22px rgba(17, 52, 50, 0.1);
    --brand-shadow-overlay: 0 12px 24px rgba(17, 52, 50, 0.12);

    --brand-hero-overlay: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.75) 65%, rgba(0, 0, 0, 1) 100%);

    --brand-transition: 0.18s ease;

    --main-color: var(--brand-green);
    --main-color-dark: var(--brand-green-dark);
    --main-color-light: var(--brand-green-10);
    --secondary-color: var(--brand-green-dark);
    --font-family-base: var(--brand-font-family);
    --text-color: var(--brand-text);
    --footer-bg: var(--brand-green-dark);
    --footer-text: var(--brand-white);
}