/*
 * Design tokens.
 *
 * The colour values are not invented — they were sampled out of frame1.png by
 * tools/build-assets.mjs (see assets/palette.json). Anything drawn procedurally
 * has to sit next to the photograph without announcing itself, and eyeballed
 * pinks never quite do.
 */

:root {
  /* ── surface, sampled from the reference plate ───────────────────────────── */
  --c-surface: #dfb3a3;
  --c-surface-deep: #d2a897;
  --c-surface-shade: #ba9083;
  --c-surface-shade-deep: #b6897e;
  --c-satin: #faded2;
  --c-lace: #cfa08f;
  --c-rose: #e2a396;
  --c-leaf: #6d4b34;

  /* ── materials ───────────────────────────────────────────────────────────── */
  --c-envelope: #dfae9f;
  --c-envelope-lit: #eec3b5;
  --c-envelope-shade: #c9917f;
  --c-envelope-edge: #a86e5c;
  --c-envelope-inner: #b98371;

  --c-wax: #bd7566;
  --c-wax-lit: #d99a89;
  --c-wax-deep: #8e4f42;

  /* Warm cotton rag, not office white — the reference sheet is cream and the
     difference between #fff and #f7f1e7 is most of what makes paper look real. */
  --c-paper: #f8f2e8;
  --c-paper-shade: #e9dfd1;
  --c-paper-deep: #d5c6b5;

  --c-ink: #3a241d;
  --c-ink-soft: #4d332a;

  /* Shadows carry the light direction: key light is upper-left, so everything
     casts down and to the right. One rule, applied everywhere. */
  --shadow-hue: 18 40% 26%;
  --light-angle: 118deg;

  /* ── layout ──────────────────────────────────────────────────────────────── */
  --stage: 100vmax; /* overwritten by script every resize */
  --pull-x: 0px;
  --pull-y: 0px;
  /* --plate-url is declared in the generated plate.css (a data-URI placeholder)
     and replaced with an absolute URL by main.js once the framing is known. */

  /* ── type ────────────────────────────────────────────────────────────────── */
  --font-script: 'Dancing Script', 'Segoe Script', cursive;
  --font-fine: 'Petit Formal Script', 'Dancing Script', cursive;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /*
   * Type is sized against the *object it is written on*, not the viewport and
   * not the stage. The sheet claims a bigger share of the stage on a phone than
   * on a monitor, so keying the type to the stage would make the handwriting
   * shrink on exactly the device where it is already hardest to read. Keyed to
   * the sheet, a line of writing occupies the same fraction of the page
   * everywhere — which is what it does on real paper.
   */
  --type-letter: calc(var(--stage) * var(--paper-w, 0.4) * 0.054);
  --type-greeting: calc(var(--stage) * var(--paper-w, 0.4) * 0.079);
  --type-signature: calc(var(--stage) * var(--paper-w, 0.4) * 0.074);
  /* In the reference this line is a whisper you lean in to read — it spans 38%
     of the envelope's width. An earlier pass had it at 60% and it became the
     loudest thing in the frame. This lands between: legible, not shouting. */
  --type-envelope-note: calc(var(--stage) * var(--env-w, 0.455) * 0.043);

  /* ── atmosphere ──────────────────────────────────────────────────────────── */
  --grain-opacity: 0.05;
  --dapple-opacity: 0.12;
  --vignette-strength: 0.34;

  /* Live values written by the render loop. Declared here so the CSS is
     readable on its own and nothing depends on JS having run. */
  --cam-x: 0px;
  --cam-y: 0px;
  --cam-scale: 1;
  --cam-roll: 0deg;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --warmth: 0;
  --atmos-motes: 1;
}

/*
 * Registered so the handwriting reveal can be interpolated by the compositor
 * instead of by JavaScript re-writing a clip-path string every frame.
 */
@property --write {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}