/* Dressing Standard — design tokens
   Source: Claude downloads/dressing-standard-claude-code-handoff/DESIGN_SYSTEM.md
   Typography roles refined in the style-tiles review: Bodoni Moda is reserved for
   the masthead, occasional display moments, and folio numerals only — never for
   running headlines, which use Newsreader instead (Bodoni's hairlines are too
   thin to read at article-headline sizes on screen). */

:root {
  /* Color — core */
  --color-paper: #FFFFFF;
  --color-ink: #0A0A0A;
  --color-stone: #F3F0EC;
  --color-mid-gray: #8A8A8A;

  /* Color — accent (optional, sparse — see .css usage notes in base.css) */
  --color-red: #A9182A;

  /* Color — semantic aliases */
  --color-body-text: #1A1A1A;
  --color-muted-text: #4A4A4A;
  --color-rule: var(--color-ink);

  /* Type families */
  --font-display: 'Bodoni Moda', Georgia, serif;      /* masthead, folio numerals, occasional display only */
  --font-headline: 'Newsreader', Georgia, serif;       /* article headlines, section statements, quote modules */
  --font-utility: 'Archivo', system-ui, sans-serif;    /* nav, body, captions, taxonomy, commerce metadata */

  /* Type scale — desktop targets, DESIGN_SYSTEM.md > 4 */
  --text-masthead: clamp(2.75rem, 2rem + 3.5vw, 5.75rem);   /* 64–92px */
  --text-hero: clamp(2.5rem, 1.9rem + 3vw, 4.75rem);        /* 58–76px */
  --text-h1: clamp(2.25rem, 1.7rem + 2.6vw, 4.5rem);        /* 52–72px */
  --text-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.625rem);       /* 30–42px */
  --text-card-title: clamp(1.15rem, 1rem + 0.6vw, 1.75rem); /* 20–28px */
  --text-body: 1.0625rem;                                    /* 17px, within 16–18px */
  --text-utility-label: 0.72rem;                             /* 11–13px */
  --text-product-meta: 0.8rem;                               /* 12–14px */

  --leading-body: 1.65;
  --tracking-label: 0.08em;

  /* Grid */
  --content-max-width: 1400px;
  --page-margin: clamp(2rem, 4vw, 3.5rem);
  --section-gap: clamp(3.5rem, 8vw, 6rem);
  --grid-columns: 12;

  /* Article measure */
  --article-measure: 720px;
  --article-rail-width: 300px;

  /* Lines */
  --rule-width: 1px;
  --rule-width-double: 3px;

  /* Motion */
  --transition-fast: 150ms ease;
}