:root {
  /* Colors */
  --clr-white: #FAFAF8;
  --clr-black: #1C1C1C;
  --clr-grey: #5A5A5A;
  --clr-grey-light: #6E6E6E;
  --clr-bg-secondary: #F2F1ED;
  --clr-bg-tertiary: #E8E6DF;
  --clr-bg-dark: #1C1C1C;
  --clr-border: #D8D6CF;
  --clr-accent: #1C1C1C;
  --clr-accent-light: #F2F1ED;
  --clr-success: #2E7D32;
  --clr-error: #C62828;
  --clr-error-border: #c0392b;
  --clr-error-bg: #fef2f2;
  --clr-error-dark: #991b1b;
  --clr-pure-white: #fff;
  --clr-bg-highlight: #EDF5ED;
  --clr-text: #1C1C1C;

  /* Spacing */
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.25rem;
  --sp-xl: 1.5rem;
  --sp-2xl: 2rem;
  --sp-3xl: 2.5rem;
  --sp-4xl: 3.75rem;
  --sp-5xl: 5rem;
  --sp-6xl: 6.25rem;

  /* Typography */
  --txt-xs: 0.875rem;
  --txt-sm: 1rem;
  --txt-base: 1.125rem;
  --txt-lg: 1.25rem;
  --txt-xl: 1.5rem;
  --txt-2xl: 2rem;
  --txt-3xl: 3rem;
  --txt-4xl: 4rem;
  --txt-h1: clamp(1.35rem, 1rem + 1.5vw, 1.6rem);
  --txt-h2: 1.44rem;
  --txt-h3: 1.15rem;

  /* Layout */
  --container-max: 72rem;
  --container-wide: 81.25rem;
  --container-narrow: 48rem;
  --container-pad: 2rem;
  --grid-gap: 3rem;

  /* Radii & transitions */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-pill: 100rem;
  --trans: 0.25s ease;

  /* z-index */
  --z-skip-link: 9999;
  --z-sticky: 900;
  --z-back-to-top: 1000;
  --z-cart-drawer: 1100;

  /* Breakpoints (for reference — CSS custom properties cannot be used in media queries) */
  /* --bp-tablet: 991px; */
  /* --bp-mobile: 767px; */

  /* Thresholds */
  --scroll-threshold: 300;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--txt-base);
  line-height: 1.6;
  color: var(--clr-grey);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--clr-black);
  color: var(--clr-white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--clr-black);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}