/* Sherpak brand tokens. Generated from tokens.json. Light theme is the default; add data-theme="dark" to <html> for dark. */
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-latin-800-italic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --rust: #B8461A;  /* Sherpak Rust, the brand colour and the evolution of the original red. The hiker, primary b */
  --rust-light: #E0703F;  /* Rust for dark grounds: the hiker on graphite and links on dark surfaces. 5.0:1 on graphite */
  --rust-deep: #8F3412;  /* Pressed and hover state for rust buttons on light grounds. 7.0:1 with bone. */
  --graphite: #1E2224;  /* Graphite, the ink and the night colour. Wordmark, body text, spec plates, dark sections. R */
  --steel: #33393C;  /* Raised panels on graphite, footer bands, product tiles in dark sections. */
  --stone: #A9A49B;  /* Secondary text on graphite and steel only (6.4:1 and 4.8:1). Too light for text on bone. */
  --concrete: #DEDAD3;  /* Warm grey ground: product photography sweeps, alternate sections, hang tag backs. Graphite */
  --bone: #F3F1EC;  /* The paper. Default page ground, packaging stock colour, reversed wordmark on graphite. */
  --surface: #F3F1EC;  /* Page background. */
  --surface-raised: #FBFAF7;  /* Cards and panels that sit on surface. */
  --surface-sunk: #DEDAD3;  /* Wells, photo sweeps and alternate bands. */
  --ink: #1E2224;  /* Primary text and the wordmark on surface. */
  --ink-muted: #5A6266;  /* Secondary text, captions, spec labels on surface and surface-raised (5.5:1 light, 6.4:1 da */
  --line: #C9C4BA;  /* Hairlines, dividers, card borders. Not for text. */
  --line-strong: #1E2224;  /* Outlined buttons, input borders, focus rings (3:1 or better in both themes). */
  --accent: #B8461A;  /* The brand action colour: primary buttons, price, active nav, the hiker. */
  --accent-hover: #8F3412;  /* Hover and pressed state of accent. */
  --on-accent: #F3F1EC;  /* Text and icons on accent. Bone on rust in light, graphite on rust-light in dark. */
  --font-display: Barlow, "Arial Narrow", sans-serif;
  --font-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Barlow, system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --border-hair: 1px;
  --border-strap: 2px;
  --border-bar: 6px;
}
[data-theme="dark"] {
  --surface: #1E2224;
  --surface-raised: #33393C;
  --surface-sunk: #171A1B;
  --ink: #F3F1EC;
  --ink-muted: #A9A49B;
  --line: #4A5154;
  --line-strong: #F3F1EC;
  --accent: #E0703F;
  --accent-hover: #EE8656;
  --on-accent: #1E2224;
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 0.95; font-weight: 800; font-style: italic; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; font-style: italic; letter-spacing: -0.015em; }
.headline { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 800; font-style: italic; letter-spacing: -0.01em; }
.title { font-family: var(--font-display); font-size: 20px; line-height: 1.2; font-weight: 700; font-style: italic; }
.label-l { font-family: var(--font-label); font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.label { font-family: var(--font-label); font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.spec { font-family: var(--font-label); font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.body-l { font-family: var(--font-body); font-size: 19px; line-height: 29px; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 25px; font-weight: 400; }
.body-s { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 500; }
.price { font-family: var(--font-body); font-size: 24px; line-height: 1; font-weight: 700; }