/* The Catalog: design tokens. Source of truth: design/STYLE_GUIDE.md. */
/* Archivo: the Label and Text face (Hudson kept it, 2026-11-08). IBM Plex Mono: fallback for glyphs Brass Mono lacks. Must stay the first rule. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* Chosen fonts (local files). Butler: free version by Fabian De Smet, credit + link to fabiandesmet.com required wherever served.
   Brass Mono: OFL. */
@font-face { font-family: "Butler"; src: url("fonts/butler/Butler-Free-Rmn.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Butler"; src: url("fonts/butler/Butler-Free-Med.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Butler"; src: url("fonts/butler/Butler-Free-Bd.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Butler"; src: url("fonts/butler/Butler-Free-XBd.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Butler"; src: url("fonts/butler/Butler-Free-Blk.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Brass Mono"; src: url("fonts/brass-mono/BrassMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Brass Mono"; src: url("fonts/brass-mono/BrassMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* neutrals: paper and ink */
  --paper: #F6F5F1;
  --paper-2: #ECEAE4;
  --paper-3: #DFDCD4;
  --rule: #D2CEC4;
  --ink: #1C1B19;
  --ink-2: #5A554C;
  --ink-3: #8C8576;
  --white: #FFFFFF;

  /* soft plates, one per house (ink text on all) */
  --plate-powder: #A9C9E6;
  --plate-sky: #CFE3EE;
  --plate-mint: #9FD3B8;
  --plate-pink: #F2B7C4;
  --plate-lavender: #BBAEE3;
  --plate-sunflower: #F6CE3C;
  --plate-coral: #F28B6E;
  --plate-stone: #D8D0BF;

  /* strong accents, used small */
  --c-cobalt: #2452A8;
  --c-cobalt-edge: #173A7C;
  --c-tomato: #E4572E;
  --c-forest: #2F6B4F;
  --c-terracotta: #A3502D;
  --c-marigold: #EFA930;
  --c-olive: #97A23A;
  --c-slate: #8D949B;

  /* functional */
  --act: var(--c-cobalt);
  --warn: var(--c-tomato);
  --ok: var(--c-forest);
  --signal: var(--plate-sunflower);

  /* cutting mat */
  --mat: #2F6B4F;
  --mat-grid: #3F7E61;
  --mat-grid-major: #5A9479;

  /* type */
  --f-display: "Butler", Georgia, serif;
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Brass Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace; /* Plex supplies × and any glyph Brass Mono lacks */
  --t-poster: clamp(4.5rem, 13vw, 11rem);
  --t-h1: clamp(2.4rem, 5vw, 3.6rem);
  --t-h2: 1.6rem;
  --t-label: 0.82rem;
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-data: 0.85rem;

  /* space (4 px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --margin: 24px;
  --gutter: 24px;
  --maxw: 1440px;

  /* shape and motion */
  --r-key: 6px;
  --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.3, 1.4, .5, 1);
  --dur: 160ms;
}
@media (min-width: 640px) { :root { --margin: 48px; } }
@media (min-width: 1024px) { :root { --margin: 64px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; --ease-snap: linear; } }

/* type roles */
.t-poster { font: 900 var(--t-poster)/0.92 var(--f-display); letter-spacing: -0.015em; }
.t-h1 { font: 800 var(--t-h1)/1 var(--f-display); letter-spacing: -0.01em; }
.t-h2 { font: 700 var(--t-h2)/1.05 var(--f-sans); font-stretch: 85%; }
.t-label { font: 650 var(--t-label)/1.2 var(--f-sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.06em; }
.t-body { font: 400 var(--t-body)/1.5 var(--f-sans); }
.t-small { font: 450 var(--t-small)/1.45 var(--f-sans); }
.t-data { font: 400 var(--t-data)/1.35 var(--f-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); }