:root {
  --cg-color-brand-700: #2f4437;
  --cg-color-brand-600: #3f5948;
  --cg-color-brand-500: #526d5a;
  --cg-color-brand-100: #dde5df;
  --cg-color-brand-50: #eff3f0;

  --cg-color-ink-900: #1f211f;
  --cg-color-ink-700: #484c48;
  --cg-color-ink-500: #6b706b;

  --cg-color-sand-100: #e7ddc9;
  --cg-color-canvas: #f7f5f0;
  --cg-color-surface: #ffffff;
  --cg-color-border: #d8dbd7;
  --cg-color-border-strong: #aeb4ae;

  --cg-color-sale: #a3442e;
  --cg-color-sale-dark: #7f321f;
  --cg-color-success: #247044;
  --cg-color-warning: #8a5a00;
  --cg-color-error: #b3261e;
  --cg-color-info: #245f8f;
  --cg-color-swatch-negro: #1f211f;
  --cg-color-swatch-blanco: #ffffff;
  --cg-color-swatch-cuero: #8b5e3c;
  --cg-color-swatch-verde: #526d5a;
  --cg-color-swatch-azul-marino: #1f3558;
  --cg-color-overlay-brand-soft: rgb(82 109 90 / 0.12);
  --cg-color-overlay-brand-strong: rgb(82 109 90 / 0.3);
  --cg-color-overlay-sand-soft: rgb(167 127 89 / 0.12);
  --cg-color-overlay-sand-strong: rgb(167 127 89 / 0.2);
  --cg-color-overlay-surface-soft: rgb(255 255 255 / 0.8);
  --cg-color-overlay-sale-soft: rgb(163 68 46 / 0.1);
  --cg-color-overlay-warning-soft: rgb(138 90 0 / 0.12);
  --cg-color-overlay-warning-contrast: rgb(138 90 0 / 0.4);
  --cg-color-overlay-error-soft: rgb(179 38 30 / 0.12);
  --cg-color-overlay-error-contrast: rgb(179 38 30 / 0.4);
  --cg-color-overlay-success-soft: rgb(36 112 68 / 0.12);
  --cg-color-overlay-success-contrast: rgb(36 112 68 / 0.4);
  --cg-color-overlay-info-soft: rgb(36 95 143 / 0.12);
  --cg-color-overlay-info-contrast: rgb(36 95 143 / 0.4);

  --cg-font-sans: "Manrope", Arial, Helvetica, sans-serif;
  --cg-font-weight-regular: 400;
  --cg-font-weight-medium: 500;
  --cg-font-weight-semibold: 600;
  --cg-font-weight-bold: 700;

  --cg-font-size-xs: 0.8125rem;
  --cg-font-size-sm: 0.875rem;
  --cg-font-size-label: 0.9375rem;
  --cg-font-size-body: 1rem;
  --cg-font-size-body-lg: 1.125rem;
  --cg-font-size-h4: 1.25rem;
  --cg-font-size-h3: clamp(1.375rem, 2vw, 2rem);
  --cg-font-size-h2: clamp(1.75rem, 3vw, 2.75rem);
  --cg-font-size-h1: clamp(2.25rem, 4vw, 3.75rem);
  --cg-font-size-display: clamp(2.5rem, 5vw, 4.75rem);

  --cg-leading-tight: 1.08;
  --cg-leading-heading: 1.2;
  --cg-leading-body: 1.55;
  --cg-leading-relaxed: 1.65;

  --cg-space-0: 0;
  --cg-space-1: 0.25rem;
  --cg-space-2: 0.5rem;
  --cg-space-3: 0.75rem;
  --cg-space-4: 1rem;
  --cg-space-5: 1.25rem;
  --cg-space-6: 1.5rem;
  --cg-space-8: 2rem;
  --cg-space-10: 2.5rem;
  --cg-space-12: 3rem;
  --cg-space-16: 4rem;
  --cg-space-20: 5rem;
  --cg-space-24: 6rem;
  --cg-space-32: 8rem;

  --cg-container-sm: 45rem;
  --cg-container-checkout: 73.75rem;
  --cg-container-product: 85rem;
  --cg-container-wide: 90rem;
  --cg-gutter: 1rem;

  --cg-radius-xs: 0.125rem;
  --cg-radius-sm: 0.25rem;
  --cg-radius-md: 0.5rem;
  --cg-radius-lg: 0.75rem;
  --cg-radius-xl: 1.25rem;
  --cg-radius-pill: 999px;

  --cg-border: 1px solid var(--cg-color-border);
  --cg-border-strong: 1px solid var(--cg-color-border-strong);

  --cg-shadow-sm: 0 1px 2px rgb(31 33 31 / 0.08);
  --cg-shadow-md: 0 8px 24px rgb(31 33 31 / 0.12);
  --cg-shadow-lg: 0 20px 50px rgb(31 33 31 / 0.18);

  --cg-z-raised: 10;
  --cg-z-sticky: 100;
  --cg-z-dropdown: 300;
  --cg-z-backdrop: 500;
  --cg-z-drawer: 600;
  --cg-z-modal: 700;
  --cg-z-toast: 800;
  --cg-z-skip-link: 900;

  --cg-motion-instant: 80ms;
  --cg-motion-fast: 140ms;
  --cg-motion-base: 220ms;
  --cg-motion-slow: 320ms;
  --cg-motion-exit: 180ms;

  --cg-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cg-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cg-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --cg-control-height: 3rem;
  --cg-control-height-lg: 3.25rem;
  --cg-touch-target: 2.75rem;

  --cg-icon-sm: 1rem;
  --cg-icon-md: 1.25rem;
  --cg-icon-lg: 1.5rem;
  --cg-size-xxs: 0.1rem;
  --cg-size-xs: 0.6875rem;
  --cg-size-sm: 1.125rem;
  --cg-size-md: 1.5rem;
  --cg-text-decoration-thickness: 0.078125rem;

  --cg-breakpoint-sm-max: 47.99rem;
  --cg-breakpoint-nav: 64rem;

  --cg-header-height-mobile: 4rem;
  --cg-header-height-desktop: 4.5rem;
}

@media (min-width: 30rem) {
  :root {
    --cg-gutter: 1.25rem;
  }
}

@media (min-width: 48rem) {
  :root {
    --cg-gutter: 2rem;
  }
}

@media (min-width: 75rem) {
  :root {
    --cg-gutter: 3rem;
  }
}