/* ==========================================================================
   Tokens. Normative values come from DESIGN.md.
   ========================================================================== */

:root {
  /* --- Colour ----------------------------------------------------------- */
  --gallery-ink: #101114;
  --porcelain: #f0ece5;
  --deep-aubergine: #3a223d;
  --patina-blue: #3e626a;
  --mirror-silver: #b4b9be;

  /* Measured contrast, for reference when assigning:
     porcelain / ink .......... 16.3:1
     aubergine ground + porcelain 12.4:1
     silver / ink ............. 9.5:1
     patina ground + porcelain  5.8:1
     patina / ink ............. 2.8:1  FORBIDDEN as text
     silver / porcelain ....... 1.7:1  FORBIDDEN as text                     */

  --ground: var(--gallery-ink);
  --ink: var(--porcelain);
  --ink-secondary: var(--mirror-silver);
  --rule: rgb(180 185 190 / 0.22);

  /* --- Type ------------------------------------------------------------- */
  /* Freight Display / Freight Big resolve only when an Adobe Fonts kit is
     present. Until the client supplies one, Bodoni Moda carries the display
     role. Adding the kit script promotes Freight with no change here.        */
  --font-display: freight-display-pro, freight-big-pro, "Bodoni Moda",
    "Bodoni Fallback", Georgia, serif;
  --font-body: "Source Sans 3", source-sans-3, "Source Fallback", system-ui,
    sans-serif;

  /* Display ramp. Fluid, because these headings dominate the layout and have
     to breathe across viewports. Every step clears a 1.25 ratio at both ends
     of its clamp: 48→120 / 36→80 / 28→52 / 22→32. */
  /* Raised so the bookends (the wordmark and the closing invitation) sit at a
     1.8 ratio over title-1 rather than 1.5. Scale contrast is the cheapest
     source of confidence on the page. */
  --fs-display: clamp(3.25rem, 10vw, 9rem);
  --fs-title-1: clamp(2.25rem, 5.6vw, 5rem);
  --fs-title-2: clamp(1.75rem, 3.8vw, 3.25rem);
  --fs-title-3: clamp(1.375rem, 2.4vw, 2rem);

  /* Text ramp. Fixed, so reading size never depends on the window. These three
     sit close in size on purpose: they are separated by case, colour and
     tracking, not by scale. Size alone never carries this tier. */
  --fs-body: 1.0625rem;  /* 17px. PRODUCT.md floor: readers over 60. */
  --fs-meta: 0.9375rem;  /* 15px. Captions and metadata values. */
  --fs-label: 0.8125rem; /* 13px. Uppercase tracked labels only. */

  --lh-display: 0.9;
  --lh-title-1: 0.98;
  --lh-title-2: 1.08;
  --lh-title-3: 1.18;
  --lh-body: 1.62;
  --lh-body-dark: 1.7; /* The Line-Height Compensation Rule */
  --lh-meta: 1.5;
  --lh-label: 1.2;

  --tr-display: -0.024em;
  --tr-title-1: -0.018em;
  --tr-title-2: -0.012em;
  --tr-title-3: -0.006em;
  --tr-body: 0em;
  --tr-body-dark: 0.01em; /* second axis of the same compensation */
  --tr-label: 0.14em;
  --tr-num: 0.06em; /* numerals are not caps; they need far less */
  --tr-caption: 0.02em; /* sentence-case supporting lines: no caps, so no cap-tracking */

  /* Bodoni Moda is a Didone: its hairlines are structurally near-zero, and at
     400 they fall below a pixel and the letterforms lose their spine. Two
     levers fix it together. Weight thickens the stems, and pinning the optical
     size low borrows the text-size master, whose hairlines are drawn sturdier
     for small sizes. Chosen by rendering the ladder and looking at it. */
  --fw-display: 600;
  --fw-display-italic: 500;
  --display-opsz: 16;

  --fw-text: 420;
  --fw-text-dark: 450; /* third axis: light type on dark reads lighter */
  --fw-label: 600;

  --measure: 68ch;

  /* --- Space ------------------------------------------------------------ */
  /* Left open in DESIGN.md deliberately; resolved here against the artwork. */
  --space-3xs: 0.5rem;
  --space-2xs: 0.75rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2.5rem;
  --space-lg: clamp(3rem, 6vw, 6rem);
  --space-xl: clamp(5rem, 10vw, 10rem);
  /* The top of the scale carries the page's rhythm, so the two largest steps
     are pulled apart (1.7x) instead of sitting 1.05x from each other. 2xl is
     the ordinary breath between works; 3xl is reserved for arrivals and ground
     changes. Using one value for both is what made the page feel monotone. */
  --space-2xl: clamp(7rem, 13vw, 13rem);
  --space-3xl: clamp(11rem, 22vw, 22rem);

  --page-x: clamp(1.25rem, 5vw, 5rem);
  --page-max: 1800px;

  /* --- Shape ------------------------------------------------------------ */
  --radius: 0; /* The Cut-Edge Rule. Everything. */
  --hairline: 1px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 220ms;
  --dur-med: 900ms;
  --dur-slow: 1200ms;
  --dur-slower: 1600ms;
}

/* Metadata and rules invert by ground. Mirror Silver is the metadata colour on
   Gallery Ink (9.5:1) but measures 1.7:1 on Porcelain, where it is effectively
   invisible, so light grounds use Ink at reduced opacity and Patina hairlines
   instead. Contrast wins over the palette's nominal role assignment. */