/*
 * Canonical Storefront design tokens.
 * Component styles consume these values directly; this file is not a late
 * override layer and contains no component selectors.
 */
:root {
  --storefront-font-ui: "Montserrat", Arial, sans-serif;
  --storefront-font-navigation: "Montserrat", Arial, sans-serif;
  --storefront-font-heading: "Jost", Arial, sans-serif;
  --storefront-color-ink: #232323;
  --storefront-color-surface: #fff;
  --storefront-color-primary: #ffc107;
  --storefront-color-primary-hover: #000;
  --storefront-color-primary-text: #000;
  --storefront-color-primary-hover-text: #ffc107;
  --storefront-color-primary-border: #000;
  --storefront-color-control-primary-border: var(--storefront-color-primary-border);
  --storefront-color-control-primary-hover-border: var(--storefront-color-primary-border);
  --storefront-color-action-text: #000;
  --storefront-color-action-hover-text: #ffc107;
  --storefront-color-promo-text: #000;
  --storefront-color-price-sale: #e95144;
  --storefront-color-control-primary: var(--storefront-color-primary);
  --storefront-color-control-primary-hover: var(--storefront-color-primary-hover);
  --storefront-color-control-primary-text: var(--storefront-color-primary-text);
  --storefront-color-control-primary-hover-text: var(--storefront-color-primary-hover-text);
  --storefront-color-control-secondary: var(--storefront-color-primary);
  --storefront-color-control-secondary-border: #000;
  --storefront-color-control-secondary-text: #000;
  --storefront-color-control-secondary-hover: var(--storefront-color-primary-hover);
  --storefront-color-control-secondary-hover-text: #ffc107;
  --storefront-color-border: #e6e6e6;
  --storefront-color-field-border: #c7c7c7;
  --storefront-color-muted-surface: #fafafa;
  --storefront-color-muted: #969696;
  --storefront-color-placeholder: #868686;
  --storefront-color-sale: #ff0000;
  --storefront-color-new: #ffc107;
  --storefront-color-focus: #232323;
  --storefront-color-error: #d93333;
  --storefront-color-required: #e95144;
  --storefront-color-error-bg: #fceeee;
  --storefront-color-info: #202020;
  --storefront-color-info-bg: #fff2dd;
  --storefront-color-success: #5a5a5a;
  --storefront-color-success-bg: #dff0d8;
  --storefront-color-link: #232323;
  --storefront-color-link-hover: #232323;
  --storefront-color-link-underline: rgba(35, 35, 35, 0.5);
  --storefront-link-transition: color 300ms ease, text-decoration-color 300ms ease;
  /* Existing component aliases share the storefront palette. */
  --storefront-color-accent: var(--storefront-color-primary);
  --storefront-color-accent-hover: var(--storefront-color-primary-hover);
  --storefront-color-accent-text: var(--storefront-color-promo-text);
  --storefront-type-body-size: 13px;
  --storefront-type-body-line-height: 22px;
  --storefront-type-body-weight: 400;
  --storefront-type-section-heading-size: 16px;
  --storefront-type-section-heading-line-height: 22px;
  --storefront-type-section-heading-weight: 700;
  --storefront-duration-short: 100ms;
  --storefront-duration-default: 350ms;
  --storefront-duration-long: 500ms;
  --storefront-button-height: 44px;
  --storefront-button-radius: 0;
  --storefront-button-border-width: 1px;
  --storefront-font-checkout: var(--storefront-font-ui);
  --storefront-button-padding: 10px 15px;
  --storefront-button-transition: color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --storefront-field-height: 44px;
  --storefront-field-radius: 0;
  --storefront-field-padding: 10px 15px;
  --storefront-field-transition: border-color 300ms ease, background-color 300ms ease;
  --storefront-wide-shell-max: 1200px;
  --storefront-wide-shell-gutter: 15px;
}

@media (max-width: 551px) {
  :root {
    --storefront-button-height: 38px;
    --storefront-button-padding: 7px 15px;
    --storefront-field-height: 38px;
    --storefront-field-padding: 7px 15px;
    --storefront-wide-shell-gutter: 10px;
  }
}