/* ============================================================
   base.css — design tokens, reset, typography primitives
   ============================================================ */

:root {
  /* color */
  --bg:           #08070A;
  --surface:      #131215;
  --stone:        #201C19;
  --paper:        #E4E0D6;
  --ink:          #F3EFE6;
  --ink-bright:   #F6F2E9;
  --ink-dim:      rgba(243, 239, 230, 0.72);
  --ink-mute:     rgba(243, 239, 230, 0.55);
  --line:         rgba(243, 239, 230, 0.12);
  --line-strong:  rgba(243, 239, 230, 0.28);
  --line-solid:   rgba(243, 239, 230, 0.5);
  /* The mark's own palette — rim body, a darker step, rim highlight.
     White on --brand measures 6.42:1 (was 4.50:1). --brand-hi is text on
     dark only and measures 5.21:1 on --surface. */
  --brand:        #B03000;
  --brand-hi:     #F05010;
  --brand-dark:   #8F2600;

  /* The cloths, as swatch dots on the colour chips. These are the actual
     fabric colours, so they are read from the design system rather than
     picked again here — design-system/dist/styles.css is the source.
     They were referenced by js/data/vocabulary.js long before they existed
     anywhere in the store, which is why every swatch used to be invisible. */
  --jm-cloth-negro:  #14110F;
  --jm-cloth-hueso:  #E4E0D6;
  --jm-cloth-cafe:   #6E5443;
  --jm-cloth-indigo: #2E4057;
  --jm-cloth-crudo:  #C9BFAC;

  /* One colour per line, a ladder: plata, ante, oro. Design-system
     --jm-line-*. Text that NAMES a line, and the hairline round the Diamante
     photo — never a fill, a button background or a badge. Diamante's big
     name is gilded from -deep to -hi; every stop clears 5:1 on --surface.
     On --surface: 9.4:1, 6.2:1, 9.0:1. */
  --line-clasicas:      #B4BAC4;
  --line-premium:       #C08A5B;
  --line-diamante:      #E0BE72;
  --line-diamante-deep: #A7802F;
  --line-diamante-hi:   #F6E3A6;

  /* type */
  --font-sans: Archivo, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* rhythm */
  --gutter:     clamp(14px, 1.8vw, 26px);
  --gutter-sm:  clamp(6px, 1vw, 16px);
  --section-y:  clamp(34px, 5vw, 90px);
  --radius:     18px;
  --radius-sm:  10px;
  --tap:        44px;

  /* motion
   *
   * These were hardcoded in nine separate rules — 240ms on the FABs, 260ms
   * on every sheet, and the same curve typed out each time. Naming them is
   * what lets a reveal look like it belongs to the same store as the bag.
   *
   * The curve decelerates without overshoot: things arrive and settle, they
   * do not bounce. A drop that is numbered by hand should not spring. */
  --ease-entrance: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-entrance:  240ms;   /* FABs, small cards */
  --dur-sheet:     260ms;   /* full sheets */
  --dur-reveal:    800ms;   /* a section arriving on scroll */
  --stagger:       120ms;   /* between siblings in a revealed group */
  --dur-open:      900ms;   /* the first screen, settling in on load */
  --dur-open-media: 1300ms; /* ...and the photograph under it, slower still */
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  font-family: var(--font-sans);
}

/* The bag covers the viewport; the page behind it must not scroll. */
body.is-bag-open,
body.is-piece-open,
body.is-auth-open,
body.is-orders-open,
body.is-profile-open { overflow: hidden; }

h1, h2, h3, p, figure { margin: 0; }

/* Components below set display:flex/grid, which would otherwise win
   over the hidden attribute. Toggling `el.hidden` must always hide. */
[hidden] { display: none !important; }

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

a {
  color: var(--ink);
  text-decoration: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input {
  font-family: inherit;
  border-radius: 0;
}

:focus-visible {
  outline: 2px solid var(--brand-hi);
  outline-offset: 3px;
}

/* ---------- typography primitives ---------- */

.mono-note,
.eyebrow,
.filter-group__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.1em;
  color: rgba(243, 239, 230, 0.88);
  font-weight: 400;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

/* ---------- scroll rails ---------- */

.rail {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}