/* Golden River — brand tokens.
   Colour and type for the site. Link this before the page's own stylesheet and
   build from the tokens; do not restate hex values or font names anywhere else.
   Rules and reasoning: assets/brand/typography.md */

:root {
  /* ---- colour: light ------------------------------------------------- */
  --paper:      #F5EFE7;  /* the ground the mark was drawn on */
  --paper-lift: #FFFFFF;  /* cards and panels sitting on the paper */
  --ink:        #36251E;  /* body text, and the wordmark */
  --ink-soft:   #7A6557;  /* secondary text, captions */
  --rule:       #E4DACB;  /* hairlines and borders */
  --gold:       #C9A227;  /* the mark. His choice, 10 Oct 2026.
                             2.12:1 on paper — a SHAPE colour, never text. */
  --gold-deep:  #836919;  /* same hue, darkened to 4.60:1 on paper.
                             Use this, not --gold, for any gold text. */
  --navy:       #14213D;  /* email signature text; not used on the site */

  /* ---- type ----------------------------------------------------------- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono:  "Source Code Pro", ui-monospace, Menlo, Consolas, monospace;

  --t-display: clamp(1.75rem, 6.4vw, 2.85rem);
  --t-h2:      clamp(1.4rem, 3.6vw, 1.85rem);
  --t-h3:      1.3rem;
  --t-lead:    1.1875rem;
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.75rem;

  --lh-display: 1.14;
  --lh-h2:      1.25;
  --lh-h3:      1.35;
  --lh-body:    1.6;
  --lh-small:   1.5;

  --track-display: -0.012em;  /* matches the wordmark */
  --track-label:    0.09em;

  --measure: 64ch;

  /* ---- space: a 4px base, so vertical rhythm stays on one grid --------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #251A14;
    --paper-lift: #31231B;
    --ink:        #F2E8DC;
    --ink-soft:   #B49C87;
    --rule:       #402F24;
    --gold:       #D9B33C;  /* lifted: #C9A227 is too dim on a dark ground */
    --gold-deep:  #E3C05A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:      #251A14;
  --paper-lift: #31231B;
  --ink:        #F2E8DC;
  --ink-soft:   #B49C87;
  --rule:       #402F24;
  --gold:       #D9B33C;
  --gold-deep:  #E3C05A;
  color-scheme: dark;
}

/* ---- the roles, ready to apply ---------------------------------------- */

.t-display {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 48;
  text-wrap: balance; margin: 0;
}
.t-h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--t-h2); line-height: var(--lh-h2);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 24;
  text-wrap: balance; margin: 0;
}
.t-h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--t-h3); line-height: var(--lh-h3);
  font-variation-settings: "opsz" 24;
  text-wrap: balance; margin: 0;
}
.t-lead { font-size: var(--t-lead); line-height: var(--lh-body); max-width: var(--measure); margin: 0; }
.t-body { font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure); margin: 0; }
.t-small { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-soft); margin: 0; }
.t-label {
  font-size: var(--t-label); font-weight: 600; line-height: 1.4;
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-soft);
}
.t-num { font-variant-numeric: tabular-nums; }