/* ==========================================================================
   ICRUSH — design tokens
   Values extracted from the reference site (icrush.de / Shopify theme):
   - body font Jost 400, letter-spacing .06em, base 14px (desktop) / 14px (mobile)
   - headings Helvetica/Arial 700, letter-spacing .1em, uppercase opt-in
   - container gutters: 20px mobile / 32px tablet / 48px desktop
   - colours: text #1C1C1C, border #DDDDDD, sale red #E32C2B,
              footer brown rgb(131 83 43)
   ========================================================================== */

:root {
  /* ---- colours (rgb triplets so alpha can be appended) ---- */
  --ic-text: 28 28 28;
  --ic-text-rgb: 28, 28, 28;
  --ic-bg: 255 255 255;
  --ic-bg-rgb: 255, 255, 255;
  --ic-border: 221 221 221;
  --ic-accent: 28 28 28;
  --ic-sale: 227 44 43;
  --ic-success-bg: 212 227 203;
  --ic-success-text: 48 122 7;
  --ic-error-bg: 243 204 204;
  --ic-error-text: 203 43 43;
  --ic-overlay: 0 0 0 / .4;

  /* footer (scheme 3 of the reference theme) */
  --ic-footer-bg: 131 83 43;
  --ic-footer-text: 255 255 255;
  --ic-footer-border: 150 109 75;

  /* header / announcement */
  --ic-announcement-bg: 227 44 43;
  --ic-announcement-text: 255 255 255;
  --ic-header-bg: 255 255 255;
  --ic-header-border: 0 0 0 / 0;

  /* ---- typography ---- */
  --ic-font-body: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ic-font-heading: Helvetica, Arial, sans-serif;
  --ic-body-weight: 400;
  --ic-body-letter-spacing: .06em;
  --ic-heading-weight: 700;
  --ic-heading-letter-spacing: .1em;
  --ic-button-letter-spacing: .16em;

  --ic-text-h1: max(.6875rem, clamp(1.375rem, 1.146341463414634rem + .975609756097561vw, 2rem) * 1.2);
  --ic-text-h2: max(.6875rem, clamp(1.25rem, 1.0670731707317074rem + .7804878048780488vw, 1.75rem) * 1.2);
  --ic-text-h3: max(.6875rem, clamp(1.125rem, 1.0335365853658536rem + .3902439024390244vw, 1.375rem) * 1.2);
  --ic-text-h4: max(.6875rem, clamp(1rem, .9542682926829268rem + .1951219512195122vw, 1.125rem) * 1.2);
  --ic-text-h5: calc(.875rem * 1.2);
  --ic-text-h6: calc(.75rem * 1.2);
  --ic-text-xs: .75rem;
  --ic-text-sm: .8125rem;
  --ic-text-base: .875rem;
  --ic-text-lg: 1rem;
  --ic-text-xl: 1.125rem;

  /* ---- layout ---- */
  --ic-container-max: 100%;
  --ic-container-xxs: 27.5rem;
  --ic-container-xs: 42.5rem;
  --ic-container-sm: 61.25rem;
  --ic-container-md: 71.875rem;
  --ic-container-lg: 78.75rem;
  --ic-container-xl: 85rem;
  --ic-gutter: 1.25rem;
  --ic-section-spacing: 2rem;
  --ic-section-stack-gap: 1.5rem;

  /* ---- components ---- */
  --ic-radius: 0rem;
  --ic-radius-full: 9999px;
  --ic-shadow-sm: 0 2px 8px rgb(0 0 0 / .05);
  --ic-shadow: 0 5px 15px rgb(0 0 0 / .05);
  --ic-shadow-md: 0 5px 30px rgb(0 0 0 / .05);
  --ic-button-h: 43px;           /* reference: padding .65rem 1.75rem, 13px/1.65 */
  --ic-button-h-lg: 52px;        /* cart / checkout CTA */
  --ic-input-h: 44px;
  --ic-header-padding-block: 1rem;
  --ic-header-h: 61px;           /* measured, refreshed by JS */
  --ic-announcement-h: 44px;     /* measured, refreshed by JS */
  --ic-sticky-height: calc(var(--ic-announcement-h) + var(--ic-header-h));
  --ic-logo-w: 100px;
  --ic-drawer-max: min(92vw, 28.125rem);
  --ic-drawer-pad: 1.25rem;
  --ic-page-overlay: rgb(0 0 0 / .4);
}

@media screen and (min-width: 700px) {
  :root {
    --ic-gutter: 2rem;
    --ic-header-padding-block: 1.2rem;
    --ic-text-base: .875rem;
  }
}

@media screen and (min-width: 1000px) {
  :root {
    --ic-gutter: 3rem;
    --ic-section-spacing: 3rem;
    --ic-section-stack-gap: 2.25rem;
    --ic-drawer-pad: 2rem;
  }
}

/* the reference theme scales only a few values above 1150px */
@media screen and (min-width: 1150px) {
  :root {
    --ic-text-xl: 1.25rem;
  }
}