:root {
    --mytho-ui-scale-ratio: 1;
    --wp--preset--color--brand: #005624;
    --wp--preset--color--accent: #d4a017;
    --wp--preset--color--harvest-gold: #d4a017;
    --wp--preset--color--market-orange: #d4a017;
    --wp--preset--color--surface-page: #faf9f6;
    --wp--preset--color--surface-panel: #ffffff;
    --wp--preset--color--surface-raised: #ffffff;
    --wp--preset--color--ink: #1b1b1b;
    --wp--preset--color--muted: #666666;
    --wp--preset--color--border-soft: #e5e5e5;

    --global-palette1: #005624;
    --global-palette2: #0a7a35;
    --global-palette3: #1b1b1b;
    --global-palette4: #2d2d2d;
    --global-palette5: #666666;
    --global-palette6: #8a8a8a;
    --global-palette7: #ffffff;
    --global-palette8: #faf9f6;
    --global-palette9: #ffffff;
    --global-palette10: #d4a017;
    --global-palette11: #d4a017;
    --global-palette12: #5f5f5f;
    --global-palette13: #005624;
    --global-palette14: var(--wp--preset--color--harvest-gold);
    --global-palette15: #e8bd3c;
    --global-palette16: var(--wp--preset--color--market-orange);
    --global-palette17: #f1de9f;

    --global-palette-highlight: var(--global-palette1);
    --global-palette-highlight-alt: var(--global-palette2);
    --global-palette-highlight-alt2: #e7f4eb;
    --global-palette-btn: #ffffff;
    --global-palette-btn-bg: var(--global-palette1);
    --global-palette-btn-hover: #ffffff;
    --global-palette-btn-bg-hover: var(--global-palette2);
    --global-palette-btn-out: var(--global-palette1);
    --global-palette-btn-out-hover: var(--global-palette2);
    --global-palette-btn-sec: var(--global-palette3);
    --global-palette-btn-sec-bg: var(--global-palette7);
    --global-palette-btn-sec-hover: var(--global-palette3);
    --global-palette-btn-sec-bg-hover: #ebe4d5;
    --global-gray-400: #e5e5e5;
    --global-gray-500: #c9c9c9;

    --mytho-color-brand: var(--wp--preset--color--brand, #005624);
    --mytho-color-accent: var(--wp--preset--color--accent, #d4a017);
    --mytho-color-harvest: var(--wp--preset--color--harvest-gold, #d4a017);
    --mytho-color-market: var(--wp--preset--color--market-orange, #d4a017);
    --mytho-color-surface-page: var(--wp--preset--color--surface-page, #faf9f6);
    --mytho-color-surface-panel: var(--wp--preset--color--surface-panel, #ffffff);
    --mytho-color-surface-raised: var(--wp--preset--color--surface-raised, #ffffff);
    --mytho-color-text-primary: var(--wp--preset--color--ink, #1b1b1b);
    --mytho-color-text-secondary: #444444;
    --mytho-color-text-muted: var(--wp--preset--color--muted, #666666);
    --mytho-color-border-soft: var(--wp--preset--color--border-soft, #e5e5e5);
    --mytho-color-border-strong: #cfcfcf;
    --mytho-color-success: #0a7a35;
    --mytho-color-warning: var(--mytho-color-harvest);
    --mytho-color-danger: #b23a2b;
    --mytho-color-promo-warm: var(--mytho-color-market);
    --mytho-shadow-level-1: 0 4px 16px rgba(32, 27, 23, 0.08);
    --mytho-shadow-level-2: 0 14px 34px rgba(32, 27, 23, 0.12);
    --mytho-space-0: 0.25rem;
    --mytho-space-1: 0.5rem;
    --mytho-space-2: 0.75rem;
    --mytho-space-3: 1rem;
    --mytho-space-4: 1.5rem;
    --mytho-space-5: 2rem;
    --mytho-space-6: 3rem;
    --mytho-space-7: 4rem;
    --mytho-radius-input: 0.5rem;
    --mytho-radius-button: 0.5rem;
    --mytho-radius-card: 0.75rem;
    --mytho-radius-round: 0.5rem;
    --mytho-container-max: 75rem;
    --mytho-control-height: 3rem;
    --mytho-control-height-lg: 3.25rem;
    --mytho-font-size-body: 1rem;
    --mytho-font-size-body-large: 1.0625rem;
    --mytho-font-size-small: 0.9375rem;
    --mytho-font-size-caption: 0.875rem;
    --mytho-line-height-body: 1.65;
    --mytho-line-height-tight: 1.25;
    --mytho-desktop-body-font-size: 0.875rem;
    --mytho-desktop-control-font-size: 0.875rem;
    --mytho-desktop-small-font-size: 0.8125rem;
    --mytho-desktop-h1-size: 2.15rem;
    --mytho-desktop-h2-size: 1.55rem;
    --mytho-desktop-h3-size: 1.3rem;
    --mytho-desktop-h4-size: 1rem;
    --mytho-account-title-size: 1.2rem;
    --mytho-account-panel-title-size: 1.05rem;
    --mytho-account-text-size: 0.875rem;
    --mytho-account-small-size: 0.8125rem;
    --mytho-account-control-size: 0.875rem;
    --mytho-product-card-width: 13.5rem;
    --mytho-product-card-gap: var(--mytho-space-3);
    --mytho-category-card-width: 6.5rem;
    --mytho-category-card-gap: 0.75rem;
    --mytho-home-heading-max: 2rem;
    --mytho-home-hero-title-size: 3rem;
    --mytho-home-copy-size: 1rem;
    --mytho-home-small-ui-size: 0.9rem;
    --mytho-product-title-size: 1rem;
    --mytho-product-price-size: 0.95rem;
    --mytho-product-meta-size: 0.82rem;
    --mytho-home-category-label-size: 0.84rem;
    --mytho-product-showcase-padding: 0.55rem;
    --mytho-shop-heading-size: 1.1rem;
    --mytho-shop-text-size: 0.9rem;
    --mytho-shop-product-title-size: 0.84rem;
    --mytho-shop-product-price-size: 0.78rem;
    --mytho-shop-product-amount-size: 0.84rem;
    --mytho-shop-product-meta-size: 0.8rem;
    --mytho-shop-icon-action-size: 1.5rem;
}

@media (min-width: 48rem) {
    :root {
        --mytho-product-card-width: 13rem;
        --mytho-product-card-gap: 0.95rem;
        --mytho-category-card-width: 6rem;
        --mytho-category-card-gap: 0.72rem;
        --mytho-home-heading-max: 1.55rem;
        --mytho-home-hero-title-size: 2.15rem;
        --mytho-home-copy-size: 0.86rem;
        --mytho-home-small-ui-size: 0.76rem;
        --mytho-product-title-size: 0.82rem;
        --mytho-product-price-size: 0.78rem;
        --mytho-product-meta-size: 0.68rem;
        --mytho-home-category-label-size: 0.7rem;
        --mytho-product-showcase-padding: 0.53rem;
        --mytho-shop-heading-size: 0.9rem;
        --mytho-shop-text-size: 0.76rem;
        --mytho-shop-product-title-size: 0.74rem;
        --mytho-shop-product-price-size: 0.68rem;
        --mytho-shop-product-amount-size: 0.74rem;
        --mytho-shop-product-meta-size: 0.68rem;
        --mytho-shop-icon-action-size: 1.18rem;
    }
}

@media (min-width: 64rem) {
    :root {
        --mytho-product-card-width: 12.25rem;
        --mytho-product-card-gap: 0.85rem;
        --mytho-category-card-width: 5.35rem;
        --mytho-category-card-gap: 0.68rem;
        --mytho-home-heading-max: 1.42rem;
        --mytho-home-hero-title-size: 2rem;
        --mytho-home-copy-size: 0.82rem;
        --mytho-home-small-ui-size: 0.72rem;
        --mytho-product-title-size: 0.76rem;
        --mytho-product-price-size: 0.72rem;
        --mytho-product-meta-size: 0.63rem;
        --mytho-home-category-label-size: 0.66rem;
        --mytho-product-showcase-padding: 0.5rem;
        --mytho-shop-heading-size: 0.84rem;
        --mytho-shop-text-size: 0.72rem;
        --mytho-shop-product-title-size: 0.7rem;
        --mytho-shop-product-price-size: 0.64rem;
        --mytho-shop-product-amount-size: 0.7rem;
        --mytho-shop-product-meta-size: 0.64rem;
        --mytho-shop-icon-action-size: 1.1rem;
    }
}

@media (min-width: 80rem) {
    :root {
        --mytho-product-card-width: 11.25rem;
        --mytho-product-card-gap: 0.75rem;
        --mytho-category-card-width: 4.85rem;
        --mytho-category-card-gap: 0.6rem;
        --mytho-home-heading-max: 1.32rem;
        --mytho-home-hero-title-size: 1.85rem;
        --mytho-home-copy-size: 0.78rem;
        --mytho-home-small-ui-size: 0.68rem;
        --mytho-product-title-size: 0.72rem;
        --mytho-product-price-size: 0.68rem;
        --mytho-product-meta-size: 0.6rem;
        --mytho-home-category-label-size: 0.62rem;
        --mytho-product-showcase-padding: 0.46rem;
        --mytho-shop-heading-size: 0.8rem;
        --mytho-shop-text-size: 0.68rem;
        --mytho-shop-product-title-size: 0.66rem;
        --mytho-shop-product-price-size: 0.6rem;
        --mytho-shop-product-amount-size: 0.66rem;
        --mytho-shop-product-meta-size: 0.6rem;
        --mytho-shop-icon-action-size: 1rem;
    }
}

html[data-mytho-ui-scale="sm"] {
    --mytho-ui-scale-ratio: 0.9375;
    font-size: 93.75%;
}

html[data-mytho-ui-scale="md"] {
    --mytho-ui-scale-ratio: 1;
    font-size: 100%;
}

html[data-mytho-ui-scale="lg"] {
    --mytho-ui-scale-ratio: 1.125;
    font-size: 112.5%;
}

html[data-mytho-ui-scale="xl"] {
    --mytho-ui-scale-ratio: 1.25;
    font-size: 125%;
}
