/* WSH Shipping - design tokens. Components use these; they never hold raw values.
   Source of truth: brand/guide/BRAND-GUIDE.md. Breakpoints (for media queries, which cannot read
   custom properties): 640px (tablet), 960px (desktop), 1280px (wide). */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/BodoniModa.woff2") format("woff2");
  font-weight: 500 700;
  font-display: block; /* preloaded, 30 KB: avoids the headline reflow (CLS) */
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* Colour: raw */
  --ink: #17140F;
  --ink-soft: #5A544B;
  --paper: #F4EFE6;
  --paper-2: #EAE3D6;
  --rule: #CFC6B6;
  --seal: #A8251C;
  --seal-deep: #8E1F17;

  /* Colour: roles */
  --color-bg: var(--paper);
  --color-bg-alt: var(--paper-2);
  --color-bg-inverse: var(--ink);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-text-inverse: var(--paper);
  --color-rule: var(--rule);          /* decorative hairlines only (1.5:1) */
  --color-rule-strong: var(--ink);    /* rules that carry structure */
  --color-field-border: var(--ink-soft); /* 6.5:1, meets 3:1 for UI */
  --color-accent: var(--seal);        /* once per view: the seal, or the one primary action */
  --color-accent-hover: var(--seal-deep);
  --color-focus: var(--seal);
  --color-error: var(--seal-deep);

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-text: "Newsreader", Georgia, "Times New Roman", serif;
  --weight-text: 400;
  --weight-text-strong: 600;
  --weight-display: 600;

  /* Type scale: mobile first, fluid to desktop (360px -> 1280px) */
  --step--2: 0.75rem;                                   /* 12px  legal, captions in caps */
  --step--1: 0.875rem;                                  /* 14px  small print, labels */
  --step-0: 1.0625rem;                                  /* 17px  body */
  --step-1: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);  /* 19-22 lead */
  --step-2: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);   /* 22-30 h3 */
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);     /* 28-42 h2 */
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.875rem);     /* 36-62 h1 */
  --step-5: clamp(2.75rem, 1.7rem + 4.6vw, 5.5rem);       /* 44-88 home statement */
  --leading-tight: 1.08;
  --leading-heading: 1.15;
  --leading-body: 1.55;
  --tracking-caps: 0.16em;
  --measure: 34em;

  /* Space: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --page-max: 76rem;

  /* Lines: the ledger */
  --hairline: 1px;
  --rule-heavy: 3px;
  --double-rule-gap: 3px;

  /* Shape: documents are square */
  --radius-0: 0;
  --radius-1: 2px;

  /* Elevation: none. Paper does not float. Focus is the only ring. */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--color-focus);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-seal: 520ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-press: cubic-bezier(0.5, 0, 0.2, 1.4);  /* the seal pressing down */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-seal: 0ms; }
}