/* TENON design tokens
 * Source of truth for colour and type. Never hardcode a hex or a font size —
 * reference the custom property so light/dark and the scale stay consistent.
 * Documentation and reasoning: .claude/brand/visual.md
 */

:root {
  /* Colour — light (default) */
  --bg: #F5F2EC;
  --surface: #FFFFFF;
  --text: #1A1814;
  --muted: #6B6459;
  --accent: #8A5A3B;
  --line: #E0DACE;

  /* Type families */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --size-display: 72px;
  --size-h1: 48px;
  --size-h2: 32px;
  --size-lead: 20px;
  --size-body: 16px;
  --size-caption: 13px;

  /* Line heights — only two values exist in this system */
  --lh-display: 1.15;
  --lh-body: 1.6;

  /* Tracking */
  --track-display: -0.02em;
  --track-wordmark: 0.18em;

  /* Weights */
  --weight-display: 600;
  --weight-body: 400;
  --weight-label: 500;
}

/* Colour — dark. Warm near-black, not neutral grey. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14130F;
    --surface: #1E1C17;
    --text: #F0EDE5;
    --muted: #9A9287;
    --accent: #C88A5E;
    --line: #2C2922;
  }
}

:root[data-theme="dark"] {
  --bg: #14130F;
  --surface: #1E1C17;
  --text: #F0EDE5;
  --muted: #9A9287;
  --accent: #C88A5E;
  --line: #2C2922;
}

/* ---------- Base ---------- */

/* The ground is --hero-ground, not --bg, and that is not an oversight.
 * It is only ever SEEN during the opening: the circle wipe clips the film away
 * outside its radius, and the half-faded hero composites straight onto whatever
 * is behind it there. Themed, that meant a light-mode reveal happening against a
 * near-white page while the hero itself is pinned dark — the whole frame outside
 * the circle came out mid-grey. Past the wipe the canvas covers the viewport, so
 * this colour is never on screen again. --text stays themed: the stats beat is
 * the one surface that still inverts, and it inherits from here. */
body {
  background: var(--hero-ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
}

/* Fraunces is headlines only. Body and UI are always Inter. */
h1, h2, h3,
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 72;
}

h1, .display { font-size: var(--size-display); }
h2 { font-size: var(--size-h1); }
h3 { font-size: var(--size-h2); }

.lead { font-size: var(--size-lead); }

.caption,
.label {
  font-size: var(--size-caption);
  color: var(--muted);
}

.label { font-weight: var(--weight-label); }

/* Wordmark. The 0.18em tracking is load-bearing — do not let a nav bar squeeze it. */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--track-wordmark);
}

/* Every price and every dimension. Figures update live during configuration
 * and will jitter horizontally without tabular figures. */
.price,
.dimension,
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); }

hr,
.rule {
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---------- Scroll-film additions ----------
 * Additive only. Nothing above this line is modified.
 */

:root {
  /* Fluid display sizes. Each floors at the fixed scale in tokens above —
   * 72 / 48 stay exactly 72 / 48 on a small viewport, and only grow. */
  --size-hero:    clamp(72px,  7.6vw, 128px);
  --size-beat:    clamp(48px,  4.8vw,  76px);

  /* Full-bleed overlay for the stats beat. This one still follows the theme —
   * it covers the whole viewport, so it is a page surface, not a film surface. */
  --scrim-stats: color-mix(in oklab, var(--bg) 94%, transparent);

  /* ----- On-film palette -----
   *
   * These deliberately DO NOT invert with the theme, and that is the one place
   * this file breaks its own symmetry. The footage is a locked-off shot of a
   * bright room: the wall behind the copy sits near 0.76 relative luminance in
   * every frame. Near-white text would need the film darkened to roughly 0.25
   * to be legible — a ~70% veil, which destroys the point of a glass backdrop.
   * Dark ink on the same untinted film measures about 13:1, and still clears
   * 5.8:1 over the darkest corner of the frame. So the film is treated as what
   * it is — a light surface — in both themes.
   *
   * The stats overlay and the stats beat's own copy still invert normally.
   * The opening does not - see the hero palette below.
   */

  --film-ink:      #1A1814;   /* matches the light --text */
  /* The secondary ink, for .section-label and .section-note.
   *
   * Two rounds of measurement pushed this down. Light --muted (#6B6459) reaches
   * only ~3.8:1 against this film. #4A4335 replaced it and passed everywhere the
   * headings and body copy were checked — but the notes sit at the very bottom
   * of the copy block, which on the promise beat lands on the sofa's wooden
   * frame: rgb(152 143 126) even under the wash, where #4A4335 measures 3.06:1.
   *
   * So it is darker again, and the hierarchy between this and --film-ink is now
   * carried mostly by size, weight and the 0.16em tracking rather than by tone.
   * That is the honest trade: the footage has dark features under the copy, and
   * a secondary ink light enough to read as secondary everywhere cannot also be
   * legible over them. */
  --film-ink-soft: #262219;   /* worst measured pixel: 4.95:1 */
  --film-line:     rgb(26 24 20 / 0.18);

  /* The frost lifts rather than darkens, and that direction is deliberate.
   *
   * With dark ink, darkening the backdrop reduces contrast. The wall and floor
   * already sit around #E8E2D6, so a warm paper wash is invisible across ~90%
   * of the frame — it is only doing work in the shadow under the sofa and on
   * the wooden frame, measured at rgb(63 50 28), which is exactly where the
   * copy would otherwise drop to about 1.4:1 and become unreadable.
   *
   * The number is set by the worst pixel, not the average, and the promise beat
   * sets it every time: 0.40 dropped its body to 4.46:1 over the sofa’s wooden
   * frame, 0.44 held on a desktop but left its note at 3.80:1 on a phone, where
   * the narrower column puts that line squarely on the sofa, and 0.52 only got
   * that same line to 4.41:1.
   *
   * Raising it costs almost nothing now. The wash follows the lines rather than
   * filling a box, so on flat wall it lifts about 2 levels — the step it used to
   * put down the middle of the frame is simply not there to grow. Over the type,
   * which is the only place it does any work, this is the contrast floor.
   *
   * Raise this before ever widening the pool back out. The reach is a design
   * decision; the floor is not. */
  --film-glass: rgb(245 242 236 / 0.56);

  --film-accent:     #8A5A3B;  /* light --accent, held fixed over the film */
  --film-on-accent:  #F5F2EC;

  /* ----- The opening -----
   *
   * The loader and the hero are one authored surface: the loader cross-fades
   * straight into the hero, and the hero then fades off to uncover the film.
   * Following the theme made that opening read as two different pages - the
   * same panel came back black-on-white or white-on-black depending on nothing
   * the reader did - so it is pinned, for the same kind of reason the film
   * above is pinned the other way. The film is a light surface because the
   * footage is one; the opening is a dark surface because it is the ground the
   * bright film is revealed OUT of, and that contrast is the whole opening.
   *
   * These four are the dark palette's own values, held fixed. Contrast is
   * therefore already proven: --hero-ink on --hero-ground is 16.3:1 and
   * --hero-ink-soft is 6.05:1, clear of AA at the 13px caption size.
   *
   * The header crosses from this surface onto the film, so it now switches
   * between the two pinned palettes rather than following the theme at all.
   */

  --hero-ground:   #14130F;   /* the dark --bg,    held fixed */
  --hero-ink:      #F0EDE5;   /* the dark --text,  held fixed */
  --hero-ink-soft: #9A9287;   /* the dark --muted, held fixed */
  --hero-line:     #2C2922;   /* the dark --line,  held fixed */
}