:root {
    /* Fonts — live leafymarket.ca WoodMart tokens */
    --primary-font: "Albert Sans", Arial, Helvetica, sans-serif;
    --heading-font: "Albert Sans", Arial, Helvetica, sans-serif;
    --display-heading-font: "Bricolage Grotesque", var(--heading-font);
    --header-font: "Urbanist", Arial, Helvetica, sans-serif;
    --entities-font: "Urbanist", Arial, Helvetica, sans-serif;

    /* Display heading accent gradients */
    --heading-accent-lime: #c0eb75;
    --heading-accent-green-lt: #69db7c;
    --heading-accent-green-glow: #b2f2bb;
    --heading-accent-gold: #ffd43b;
    --heading-accent-green: linear-gradient(
        100deg,
        var(--heading-accent-lime) 0%,
        var(--heading-accent-green-lt) 45%,
        var(--heading-accent-green-glow) 100%
    );
    --heading-accent-gold-gradient: linear-gradient(100deg, var(--heading-accent-gold) 0%, #ffe066 50%, #fff3bf 100%);
    --heading-accent-promo: linear-gradient(100deg, #ffffff 0%, #ffe5f1 45%, #ffffff 100%);

    /* Absolute */
    --white: #ffffff;
    --black: #000000;

    /* Primary — --wd-primary-color: rgb(55,178,14) */
    --green-60: rgb(55, 178, 14);
    --green-65: rgb(45, 150, 10);
    --green-70: rgb(36, 122, 8);
    --green-75: rgb(78, 224, 110);
    --green-90: #d4f5c8;
    --green-95: #e8fae1;
    --green-97: #f3fdf0;
    --green-99: #fafef8;

    /* Legacy aliases */
    --purple-60: var(--green-60);
    --purple-65: var(--green-65);
    --purple-70: var(--green-70);
    --purple-75: var(--green-75);
    --purple-90: var(--green-90);
    --purple-95: var(--green-95);
    --purple-97: var(--green-97);
    --purple-99: var(--green-99);

    --white-90: #e4e4e7;
    --white-95: #f1f1f1;
    --white-97: #f7f7f7;
    --white-99: #fcfcfd;

    /* Neutrals — WoodMart-ish grays */
    --gray-08: #1a1a1a;
    --gray-10: #242424;
    --gray-15: #333333;
    --gray-20: #333333;
    --gray-30: #777777;
    --gray-40: #666666;
    --gray-50: #767676;
    --gray-60: #999999;
    --gray-300: #b8b8b8;
    --brd-gray-300: rgba(0, 0, 0, 0.105);

    --header-green: #00704a;
    --header-top-bg: #006843;
    --header-main-bg: #00704a;
    --header-secondary-bg: #ffffff;
    --label-green: #65b32e;
    --label-red: #d41212;
    --color-star: #eabe12;
    --color-success: #5cb85c;
    --color-danger: #d9534f;
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-dark-section: #1a1a1a;
    --color-dark-text: rgba(255, 255, 255, 0.8);

    /* Borders / radii — live is near-square */
    --border: 1px solid var(--brd-gray-300);
    --border-radius: 0;
    --border-radius-sm: 3px;
    --border-radius-xs: 0;
    --border-radius-md: 6px;
    --border-radius-pill: 50px;

    --shadow-sm: 0 0 3px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 1px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);

    /*
     * Type scale — live:
     * body 15px / 400 / Albert Sans
     * titles 400 Albert Sans
     * entities / widgets 600 Urbanist 16px
     */
    --h1-font-size: 32px;
    --h2-font-size: 26px;
    --h3-font-size: 22px;
    --h4-font-size: 18px;
    --h5-font-size: 16px;
    --h6-font-size: 15px;

    --body-font-size: 15px;
    --small-font-size: 14px;
    --tiny-font-size: 12px;

    /* Body / paragraph text — site-wide standard */
    --body-font-family: var(--primary-font);
    --body-font-weight: var(--font-weight-regular);
    --body-text-color: var(--color-text-muted);
    --body-text-color-strong: var(--color-text);
    --body-text-max-width: 62ch;
    --body-paragraph-gap: var(--stack-gap);
    --body-section-gap: var(--stack-gap-lg);
    --body-text-color-on-dark: rgba(255, 255, 255, 0.88);
    --body-text-color-on-brand: #9ec9ab;
    --section-bg-gradient: linear-gradient(
        160deg,
        #06170d 0%,
        #0c2c17 45%,
        #04130a 100%
    );

    /* Eyebrow / subheading pill */
    --eyebrow-text: #06170d;
    --eyebrow-dot: #06170d;
    --eyebrow-gradient: linear-gradient(90deg, #c0eb75, #69db7c);
    --eyebrow-gradient-gold: linear-gradient(90deg, #ffd43b, #ffe066);
    --eyebrow-shadow: 0 6px 18px rgba(47, 158, 68, 0.3);
    --eyebrow-shadow-gold: 0 6px 18px rgba(255, 212, 59, 0.3);
    --eyebrow-font-size: clamp(10px, 1.4vw, 12px);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --title-font-weight: 400;
    --entities-font-weight: 600;

    --line-height-heading: 1.3;
    --line-height-body: 1.6;
    --line-height-tight: 1.35;

    /* Semantic — light marketplace */
    --color-bg: var(--white);
    --color-surface: #f7f7f7;
    --color-surface-elevated: #f1f1f1;
    --color-text: #333333;
    --color-text-muted: #767676;
    --color-text-subtle: #666666;
    --color-title: #242424;
    --color-primary: rgb(55, 178, 14);
    --color-primary-hover: rgb(45, 150, 10);
    --color-primary-active: rgb(36, 122, 8);
    --color-border: var(--brd-gray-300);
    --color-focus-ring: var(--color-primary);

    --transition: 0.25s ease;
    --anim-duration: 0.45s;
    --anim-ease: cubic-bezier(0.19, 1, 0.22, 1);

    /* Spacing — live section rhythm ~70px, block 20px */
    --section-margin: 40px;
    --section-padding: 40px;
    --container-gutter: 15px;
    --container-max-width: 1600px;
    --stack-gap: 12px;
    --stack-gap-lg: 20px;
    --accordion-spacing: 20px;

    /* Form & Button — Leafy Market CTA system */
    --input-bg: var(--white);
    --input-min-height: 42px;
    --btn-min-height: 48px;
    --btn-padding-inline: 30px;
    --btn-font-size: 14px;
    --btn-font-weight: 600;
    --btn-transform: none;
    --btn-radius: 13px;
    --btn-primary-text: #06170d;
    --btn-primary-lime: #c0eb75;
    --btn-primary-mint: #69db7c;
    --btn-primary-gradient: linear-gradient(95deg, var(--btn-primary-lime), var(--btn-primary-mint));
    --btn-primary-shadow: 0 10px 26px rgba(105, 219, 124, 0.36);
    --btn-secondary-text: #06170d;
    --btn-secondary-gold: #ffd43b;
    --btn-secondary-gold-lt: #ffe066;
    --btn-secondary-gradient: linear-gradient(95deg, var(--btn-secondary-gold), var(--btn-secondary-gold-lt));
    --btn-secondary-shadow: 0 10px 26px rgba(255, 212, 59, 0.34);
    --btn-tertiary-text: var(--color-title);
    --btn-tertiary-bg: rgba(0, 0, 0, 0.04);
    --btn-tertiary-border: rgba(0, 0, 0, 0.12);
    --btn-tertiary-hover-border: var(--btn-primary-mint);
    --focus-outline-width: 2px;
    --focus-outline-offset: 2px;
}

@media (min-width: 768px) {
    :root {
        --section-margin: 50px;
        --section-padding: 50px;
        --container-gutter: 20px;
        --stack-gap-lg: 24px;

        --h1-font-size: 40px;
        --h2-font-size: 32px;
        --h3-font-size: 24px;
        --h4-font-size: 18px;
        --h5-font-size: 16px;
        --h6-font-size: 15px;
        --body-font-size: 15px;
        --btn-font-size: 14px;
    }
}

@media (min-width: 1200px) {
    :root {
        --section-margin: 70px;
        --section-padding: 70px;
        --container-gutter: 15px;
        --container-max-width: 1600px;

        --h1-font-size: 46px;
        --h2-font-size: 36px;
        --h3-font-size: 26px;
        --h4-font-size: 20px;
        --h5-font-size: 16px;
        --h6-font-size: 15px;
        --body-font-size: 15px;
    }
}