/* Base styles and the basic elements shared by the styleguide and the storyboard. */

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

/* A Modal locks scrolling with overflow: hidden on html. The reserved gutter keeps the width,
   so the page does not jump sideways when the scrollbar goes away. */
html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: var(--transition-state);
}

/* Project rule: every state change is smooth, unless the visitor asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lift-y: 0px;
  }

  *,
  ::before,
  ::after {
    transition-duration: 0.01ms !important;
  }
}

a:hover {
  color: var(--color-brand-hover);
}

::selection {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

/* The design has no focus style; the ring keeps the keyboard usable. */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.on-ink :focus-visible {
  outline-color: var(--color-on-ink);
}

/* The target of the skip link takes focus only to move the keyboard there. */
main:focus {
  outline: none;
}

/* Skip link: first stop of the keyboard, hidden until it has focus */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 70;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Type styles */
.text-display,
.text-heading-xl,
.text-heading-lg,
.text-heading-md,
.text-title,
.text-title-sm,
.text-body-lg,
.text-body,
.text-ui,
.text-ui-sm {
  font-family: var(--font-sans);
}

.text-price,
.text-price-sm,
.text-mono-lg,
.text-mono,
.text-mono-sm,
.text-mono-xs,
.text-code,
.text-utility,
.text-eyebrow,
.text-label,
.text-tag {
  font-family: var(--font-mono);
}

.text-utility,
.text-eyebrow,
.text-label,
.text-tag {
  text-transform: uppercase;
}

.text-display {
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-weight: var(--text-display--font-weight);
  text-wrap: balance;
}

.text-heading-xl {
  font-size: var(--text-heading-xl);
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
  font-weight: var(--text-heading-xl--font-weight);
  text-wrap: balance;
}

.text-heading-lg {
  font-size: var(--text-heading-lg);
  line-height: var(--text-heading-lg--line-height);
  letter-spacing: var(--text-heading-lg--letter-spacing);
  font-weight: var(--text-heading-lg--font-weight);
}

.text-heading-md {
  font-size: var(--text-heading-md);
  line-height: var(--text-heading-md--line-height);
  letter-spacing: var(--text-heading-md--letter-spacing);
  font-weight: var(--text-heading-md--font-weight);
}

.text-title {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  font-weight: var(--text-title--font-weight);
  text-wrap: pretty;
}

.text-title-sm {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  letter-spacing: var(--text-title-sm--letter-spacing);
  font-weight: var(--text-title-sm--font-weight);
  text-wrap: pretty;
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
  letter-spacing: var(--text-body-lg--letter-spacing);
  font-weight: var(--text-body-lg--font-weight);
  text-wrap: pretty;
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  letter-spacing: var(--text-body--letter-spacing);
  font-weight: var(--text-body--font-weight);
  text-wrap: pretty;
}

.text-ui {
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
  letter-spacing: var(--text-ui--letter-spacing);
  font-weight: var(--text-ui--font-weight);
}

.text-ui-sm {
  font-size: var(--text-ui-sm);
  line-height: var(--text-ui-sm--line-height);
  letter-spacing: var(--text-ui-sm--letter-spacing);
  font-weight: var(--text-ui-sm--font-weight);
}

.text-price {
  font-size: var(--text-price);
  line-height: var(--text-price--line-height);
  letter-spacing: var(--text-price--letter-spacing);
  font-weight: var(--text-price--font-weight);
}

.text-price-sm {
  font-size: var(--text-price-sm);
  line-height: var(--text-price-sm--line-height);
  letter-spacing: var(--text-price-sm--letter-spacing);
  font-weight: var(--text-price-sm--font-weight);
}

.text-mono-lg {
  font-size: var(--text-mono-lg);
  line-height: var(--text-mono-lg--line-height);
  letter-spacing: var(--text-mono-lg--letter-spacing);
  font-weight: var(--text-mono-lg--font-weight);
}

.text-mono {
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
  letter-spacing: var(--text-mono--letter-spacing);
  font-weight: var(--text-mono--font-weight);
}

.text-mono-sm {
  font-size: var(--text-mono-sm);
  line-height: var(--text-mono-sm--line-height);
  letter-spacing: var(--text-mono-sm--letter-spacing);
  font-weight: var(--text-mono-sm--font-weight);
}

.text-mono-xs {
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
  letter-spacing: var(--text-mono-xs--letter-spacing);
  font-weight: var(--text-mono-xs--font-weight);
}

.text-code {
  font-size: var(--text-code);
  line-height: var(--text-code--line-height);
  letter-spacing: var(--text-code--letter-spacing);
  font-weight: var(--text-code--font-weight);
}

.text-utility {
  font-size: var(--text-utility);
  line-height: var(--text-utility--line-height);
  letter-spacing: var(--text-utility--letter-spacing);
  font-weight: var(--text-utility--font-weight);
}

.text-eyebrow {
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  font-weight: var(--text-eyebrow--font-weight);
}

.text-label {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  font-weight: var(--text-label--font-weight);
}

.text-tag {
  font-size: var(--text-tag);
  line-height: var(--text-tag--line-height);
  letter-spacing: var(--text-tag--letter-spacing);
  font-weight: var(--text-tag--font-weight);
}

/* Logo */
/*
 * The letters of the mark are holes in the original SVG, so a layer sits under them:
 * white letters on the red mark, on light and dark surfaces alike, as in the design.
 */
.logo {
  --logo-mark: var(--color-brand);
  --logo-letters: var(--color-on-brand);

  display: inline-flex;
  color: var(--color-fg);
}

.logo:hover {
  color: var(--color-fg);
}

.on-ink .logo,
.on-ink .logo:hover {
  color: var(--color-on-ink);
}

.logo__image {
  display: block;
  width: auto;
  height: 34px;
}

.logo--sm .logo__image {
  height: 30px;
}

.logo--mono {
  --logo-mark: currentColor;
  --logo-letters: transparent;
}

/* Section heading */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 32px;
}

.eyebrow {
  color: var(--color-brand);
}

.on-ink .eyebrow {
  color: var(--color-brand-tint);
}

.section-head__title {
  margin-top: 8px;
}

/* Links */
.link {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
}

.link-muted {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
  color: var(--color-fg-muted);
}

.link-muted:hover {
  color: var(--color-brand);
}

.link-underlined {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-line-strong-on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  line-height: var(--text-mono-lg--line-height);
  color: var(--color-on-ink-muted);
}

.link-underlined:hover {
  color: var(--color-on-ink);
}

.link-on-ink {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
  color: var(--color-on-ink-muted);
}

.link-on-ink:hover {
  color: var(--color-on-ink);
}

/* Tags */
.tag {
  display: inline-block;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  line-height: var(--text-tag--line-height);
  letter-spacing: var(--text-tag--letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--lg {
  padding: 6px 10px;
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
}

.tag--bestseller {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
}

.tag--sale {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.tag--new {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.tag--stocked {
  background: var(--color-success);
  color: var(--color-on-ink);
}

.tag--transit {
  background: var(--color-transit);
  color: var(--color-on-ink);
}

.tag--light {
  background: var(--color-surface);
  color: var(--color-fg);
}

/* Status: a dot and a word, the colour never speaks alone. Stock is the same mark. */
.status,
.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: var(--text-mono-sm--line-height);
  color: var(--stock-color);
}

.status::before,
.stock::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--stock-color);
}

.status--success,
.stock--in {
  --stock-color: var(--color-success);
}

.status--warning,
.stock--low {
  --stock-color: var(--color-warning);
}

.status--transit,
.stock--transit {
  --stock-color: var(--color-transit);
}

.status--error,
.stock--clearance {
  --stock-color: var(--color-brand);
}

.status--neutral,
.stock--out {
  --stock-color: var(--color-fg-muted);
}

/* Prices */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.price__current {
  font-family: var(--font-mono);
  font-size: var(--text-price);
  line-height: var(--text-price--line-height);
  font-weight: var(--text-price--font-weight);
  color: var(--color-fg);
}

.price__current--sale {
  color: var(--color-brand);
}

.price__old {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
  color: var(--color-fg-subtle);
  text-decoration: line-through;
}

.price__net {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
  color: var(--color-fg-muted);
}

/* Image placeholders */
.stripes {
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--color-stripe-a) 0 8px, var(--color-stripe-b) 8px 16px);
}

.stripes--ink {
  background: repeating-linear-gradient(135deg, var(--color-ink-stripe-a) 0 14px, var(--color-ink-stripe-b) 14px 28px);
}