@import "./fonts/instrument-sans/fonts.css";

/*
 * Crossroads catalog design tokens
 * ---------------------------------------------------------------------------
 * Every value below was MEASURED from the live utzsnacks.com (Shopify "Hyper"
 * theme, theme asset 213) with getComputedStyle / getBoundingClientRect at
 * 1440 / 1024 / 768 / 390 px, or read from the theme's own stylesheets
 * (theme.css, collection.css, section-*.css). The full table of measurements,
 * per component and per breakpoint, is docs/design-spec.md.
 *
 * Rules for builders: use these variables, never raw colours or sizes.
 * A value marked "DERIVED" is not a Utz value (Utz has no equivalent); a value
 * marked "A11Y" differs from Utz because Utz's value fails WCAG AA for text.
 *
 * Utz sets html { font-size: 62.5% }, so 1rem = 10px in the theme CSS. We use
 * rem for font sizes (1rem = 16px, so the visitor's text-size setting applies) and px for
 * everything else, and do NOT change the root font size. (Body text is 15px = 0.9375rem.)
 *
 * BREAKPOINTS (CSS variables cannot be used inside @media, so these are the
 * literal values to type in media queries; they are Utz's own):
 *
 *   sm   min-width: 640px      (only 4 rules; mostly unused)
 *   md   min-width: 768px      tablet: 3-col grids, desktop type sizes begin
 *   lg   min-width: 1024px     DESKTOP HEADER begins (hamburger below this),
 *                              desktop heading sizes, 3-col collection grid
 *   xl   min-width: 1280px     filter SIDEBAR appears, 50px gutter, 5-col
 *                              carousels, 6-col category grid
 *   2xl  min-width: 1536px     gutter grows: max(135px, 50vw - 850px)
 *
 *   "mobile" = max-width: 767.98px   "below lg" = max-width: 1023.98px
 *   "below xl" = max-width: 1279.98px  "below sm" = max-width: 639.98px
 *
 *   Hover-only effects are wrapped in
 *     @media (hover: hover) and (pointer: fine)
 *   and motion in
 *     @media (prefers-reduced-motion: no-preference)
 *
 * Mirror of the breakpoints for JS (read with getComputedStyle):
 */

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ======================================================================
     COLOUR
     ====================================================================== */

  /* Brand red. Utz's theme "primary" (rgb 196 48 28). Used by Utz for the
     sale price text and nothing else large; we use it for links/accents. */
  --color-primary: #c4301c;
  /* DERIVED: Utz has no hover state for primary. ~15% darker, 7.2:1 on white. */
  --color-primary-hover: #a52714;
  /* The red that actually fills things on Utz: footer, sale badge, cart bubble,
     and the TEXT colour of the white button on royal panels (rgb 206 14 45). */
  --color-brand-red: #ce0e2d;

  /* Royal blue: collection hero, in-grid promo tile, image-with-text band,
     hero slide panels (rgb 0 27 113). */
  --color-royal: #001b71;
  --color-royal-ink: #ffffff;
  /* Marquee brand-name text blue (rgb 29 52 154) and the "in store" badge. */
  --color-blue: #1d349a;

  /* Yellow "Best Seller" badge. */
  --color-badge: #ffd23f;
  --color-badge-ink: #1d1d1d;
  /* Other badge fills (all use white text). */
  --color-badge-new: #2f8721;
  --color-badge-sale: #ce0e2d;
  --color-badge-hot: #9d1d96;
  --color-badge-soldout: #adadad; /* white on it is only 2.2:1, do not use for text */
  --color-badge-coming: #ff4d00;
  --color-badge-ink-light: #ffffff;

  --color-text: #000000;
  /* Utz's "subtext" is pure black too (same as text); the lighter grey Utz uses
     for struck-through and de-emphasised text is --color-muted. */
  --color-subtext: #000000;
  --color-muted: #666666; /* Utz foreground-lighten-60; 5.7:1 on white */
  --color-border: #e5e5e5; /* hairlines, cards, accordion rules, toolbar pills */
  --color-border-strong: #000000; /* variant pills, focus fields */
  --color-field: #ededed; /* search field, secondary button, active pill, chips */
  --color-surface: #ffffff;
  /* #F7F7F7 is Utz's secondary-background in its other colour schemes. NOTE:
     Utz's product-card image area has NO background (white page shows through);
     use --color-surface-2 only for our icon/placeholder cards. */
  --color-surface-2: #f7f7f7;
  --color-info-bg: #f0f2ff; /* Utz "info" scheme */

  --color-button: #000000; /* primary pill button fill */
  --color-button-ink: #ffffff;
  --color-button-secondary: #ededed; /* secondary pill button fill */
  --color-button-secondary-ink: #000000;
  --color-button-on-royal: #ffffff; /* button on royal panel: white fill ... */
  --color-button-on-royal-ink: #ce0e2d; /* ... red text, wipes to red fill */

  --color-footer: #ce0e2d;
  --color-footer-ink: #ffffff;
  --color-footer-border: #e6e6e6; /* social circle outline */
  --color-footer-rule: rgba(255, 255, 255, 0.2); /* mobile accordion rules */

  /* Keyboard focus ring colour (Utz: rgb 0 27 113). Two px solid, 3px offset. */
  --color-focus: #001b71;
  /* A11Y: #001B71 on the red footer is only 2.7:1 (non-text needs 3:1). On the
     footer use --color-focus-on-red. */
  --color-focus-on-red: #ffffff;

  /* Round mega-menu tile ring (rgb 229 9 9): NOT the same red as the footer. */
  --color-ring: #e50909;
  --color-overlay: rgba(0, 0, 0, 0.5); /* page dim behind menus and drawers */
  --color-check: #16a34a; /* attribute check mark ring + tick on product page */
  --color-checkbox-border: rgba(0, 0, 0, 0.6); /* unchecked box outline */
  --color-switch-off: rgba(0, 0, 0, 0.15); /* compare/switch track */
  /* A11Y: Utz placeholder is rgba(0,0,0,.5) = 3.9:1 on the field (fails AA).
     We use .6 = 5.4:1. (Utz original kept in --color-placeholder-utz.) */
  --color-placeholder: rgba(0, 0, 0, 0.6);
  --color-placeholder-utz: rgba(0, 0, 0, 0.5);
  --color-progress-track: rgba(0, 0, 0, 0.1); /* carousel progress track */
  --color-pager-track: rgba(0, 0, 0, 0.2); /* active dot track / arrow border */
  --color-skeleton: rgba(0, 0, 0, 0.03); /* Utz image placeholder while loading */

  /* ======================================================================
     TYPE  (Instrument Sans, self-hosted; see fonts/instrument-sans/)
     ====================================================================== */

  --font-body: "Instrument Sans", "Instrument Sans Fallback", system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);

  --fw-body: 500; /* Utz body text is 500, not 400 */
  --fw-semibold: 600; /* product titles, "Sort by:" labels, accordion rows */
  --fw-bold: 700; /* headings, nav, buttons, badges, tile labels in menus */

  /* Fixed sizes (they do not change with breakpoint). */
  --fs-xs: 0.75rem; /* "Clear" in search field */
  --fs-sm: 0.84375rem; /* badges; phone collection-card labels (0.9 x 15) */
  --fs-base: 0.9375rem; /* body, nav, buttons, card titles, inputs */
  --fs-md: 1rem; /* h6 / drawer rows / section sub-headings / search headings */
  --fs-lg: 1.125rem; /* h5; struck-through price size */
  --fs-xl: 1.375rem; /* h4 on desktop ("Related Products", "Perfect Match With") */
  --fs-2xl: 1.75rem; /* h3 on desktop; h1 on phone; large price */
  --fs-3xl: 2rem; /* h2 on desktop; marquee text */
  --fs-4xl: 2.5rem; /* h1 on desktop (hero slide title, product title) */
  --fs-5xl: 4.375rem; /* hd1: collection banner title (desktop) */

  /* Responsive heading scale (Utz changes these at md and lg; see the
     @media blocks at the bottom of this file). Values here = phone. */
  --fs-h1: 1.75rem;
  --fs-h2: 1.4rem;
  --fs-h3: 1.225rem;
  --fs-h4: 1rem;
  --fs-h5: 1rem;
  --fs-h6: 1rem;
  --fs-hd1: 3.0625rem;
  --lh-h1: 1.2;
  --lh-h2: 1.201;
  --lh-h3: 1.3572;
  --lh-h4: 1.625;
  --lh-h5: 1.625;
  --lh-hd1: 1.2;

  --lh-tight: 1.2; /* headings h1/hd1 */
  --lh-base: 1.6; /* body: 15px -> 24px */
  --lh-btn: 30px; /* button label line box (button height is 48) */
  --ls-normal: 0; /* Utz letter-spacing is 0 everywhere */

  /* ======================================================================
     LAYOUT AND SHAPE
     ====================================================================== */

  /* Page gutter. --page-gutter = desktop value (xl, 1280-1535). Utz uses 16px
     below 1280 and max(135px, 50vw - 850px) from 1536. --gutter is the
     responsive one: use `padding-inline: var(--gutter)` on page containers. */
  --page-gutter: 50px;
  --page-gutter-mobile: 16px;
  --gutter: var(--page-gutter-mobile);
  /* Utz page-width setting. At >= 2400px wide the content is capped at 1700. */
  --max-width: 1700px;

  --radius-sm: 5px; /* mega-menu group row, small blocks */
  --radius-md: 6px; /* thumbnails, mobile-menu tiles, medium blocks */
  --radius-panel: 10px; /* hero/banner/promo panels, product images, grids (8px on phone) */
  --radius-card: 10px; /* product card image */
  --radius-pill: 100px; /* buttons, search field, select, chips, variant pills */
  --radius-round: 50%; /* round icon buttons, tiles, pagination, brand circle */
  --radius-badge: 24px;
  --radius-checkbox: 2px;

  /* Round mega-menu tile. Utz tiles are FLUID: 7 columns, 30px gap,
     diameter = (panel width - 180) / 7 : 122.7px @1440, 99.8px @1280, 73px
     @1024. --tile-size is the 1440 value. Inner image = 80% of the circle. */
  --tile-size: 122px;
  --tile-cols: 7;
  --tile-gap: 30px;
  --tile-ring: 2px;
  --tile-image-scale: 0.8;
  /* PLAN override: ringed 3-column tiles in the phone drawer
     ((358 - 2 x 12) / 3 = 111px). Utz itself shows 2 columns of 173px
     rounded squares (no ring) there; see design-spec "Mobile header + drawer". */
  --tile-size-mobile: 111px;
  --tile-size-mobile-utz: 173px;
  --tile-cols-mobile: 3;

  --header-row1-h: 120px; /* logo + search row, desktop (>= 1024) */
  --nav-h: 45px; /* nav row incl. its 1px bottom rule, desktop */
  --header-h: 165px; /* row1 + nav, desktop; 162px at 390, 217px at 768 */
  --header-row1-h-phone: 161px; /* 390: 16 pad + 65 logo + 64 search row + 16 */
  --header-row1-h-tablet: 216px; /* 768 */
  --logo-size: 120px; /* desktop and tablet; 65px on phone */
  --logo-size-phone: 65px;
  --field-h: 48px; /* search field, select, buttons, icon buttons */
  --btn-h: 48px;
  --btn-pad-x: 32px;
  --icon-btn: 48px;
  --checkbox-size: 20px;
  --swiper-nav: 48px; /* carousel arrows (38px when floating on hover) */
  --swiper-nav-floating: 38px;

  --card-gap: 30px; /* column gap: product grid, carousels, footer columns */
  --grid-gap: 40px; /* row gap of the collection grid at xl (20px below) */
  --grid-gap-row-tablet: 20px;
  --grid-gap-col-phone: 12px;
  --section-gap: 40px; /* default vertical section padding (top) */

  --z-sticky: 8; /* filter sidebar, sticky toolbar */
  --z-overlay: 10; /* page-dim overlay under the header */
  --z-search: 11; /* search results panel */
  --z-header: 20;
  --z-drawer: 32;

  /* ======================================================================
     SPACING SCALE (Utz uses 4px steps; extra values it uses: 6, 10, 15, 30, 45)
     ====================================================================== */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 60px;

  /* ======================================================================
     EFFECTS
     ====================================================================== */

  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.12); /* carousel arrows (drop-shadow) */
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.1); /* pinned header */
  --shadow-field-focus: 0 0 0 1px #000; /* focused search/select field */
  --shadow-checkbox-focus: 0 0 0 3px rgba(23, 23, 23, 0.1);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px; /* 2px for label-after-checkbox */

  /* Easing. Names follow Utz's --animation-* variables. */
  --ease: cubic-bezier(0.3, 1, 0.3, 1); /* "default": underline wipe, accordion, card zoom */
  --ease-nav: cubic-bezier(0.6, 0, 0.4, 1); /* mega menu, header slide */
  --ease-fast: cubic-bezier(0.7, 0, 0.3, 1); /* menu group row, short fades */
  --ease-drawer: cubic-bezier(0.7, 0, 0.2, 1); /* drawers + overlay */
  --ease-card: cubic-bezier(0.4, 0, 0.2, 1); /* card image swap, actions slide */
  --ease-sticky: cubic-bezier(0.33, 0, 0, 1); /* header nav row hide/show */

  /* Durations. */
  --dur-fast: 200ms; /* accordion content fade, variant pill, caret, reset button */
  --dur-base: 300ms; /* buttons, fields, round buttons, arrows, row hover */
  --dur-slow: 500ms; /* underline wipe, mega menu fade, header, tile zoom */
  --dur-btn: 400ms; /* button fill-wipe width */
  --dur-card: 540ms; /* card action button slide-up */
  --dur-card-swap: 850ms; /* card hover image swap */
  --dur-image: 1200ms; /* card main image fade-out */
  --dur-drawer: 600ms; /* drawer slide */
  --dur-overlay: 800ms; /* page-dim fade */
  --dur-marquee: 60s; /* marquee full loop (see reduced motion note) */
  --hover-intent: 200ms; /* delay before the mega menu opens on hover */
}

/* ===========================================================================
   Responsive tokens (Utz's own breakpoints)
   =========================================================================== */

@media (min-width: 768px) {
  :root {
    --fs-h4: 0.9625rem; /* yes, smaller than the phone value: Utz's scale */
    --fs-h5: 1.125rem;
    --lh-h5: 1.4444;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --lh-h2: 1.3125;
    --fs-h3: 1.75rem;
    --fs-h4: 1.375rem;
    --fs-hd1: 4.375rem;
  }
}

@media (max-width: 1279.98px) {
  :root {
    --gutter: var(--page-gutter-mobile);
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: var(--page-gutter);
  }
}

@media (min-width: 1536px) {
  :root {
    --gutter: max(135px, calc(50vw - 850px));
  }
}

@media (max-width: 767.98px) {
  :root {
    --radius-panel: 8px;
  }
}

/* ===========================================================================
   Reduced motion: every duration goes to zero. (The marquee and any carousel
   autoplay must ALSO be stopped in CSS/JS: set animation: none and do not
   autoplay; a 0ms duration alone does not stop an infinite animation.)
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-btn: 0ms;
    --dur-card: 0ms;
    --dur-card-swap: 0ms;
    --dur-image: 0ms;
    --dur-drawer: 0ms;
    --dur-overlay: 0ms;
    --hover-intent: 0ms;
  }
}