/* Theme tokens. Dark is the default room; light is the paper world the
   booklets live in. Only token values change — no component styling here. */
html {
  --chrome-bg: rgba(20, 18, 12, .94);
  --chrome-fade: rgba(12, 11, 7, .82);
  --dim-veil: rgba(12, 11, 7, .55);
  --hair-on-art: rgba(232, 220, 192, .22);
  --ghost-num: rgba(232, 220, 192, .09);

  /* Text and controls that sit ON artwork, under a warm veil. These never
     follow the theme: the veil is dark in both, so the type stays light. */
  --on-art-strong: #fdf6e6;
  --on-art-body: #e8e0d0;
  --on-art-muted: #cbbfa6;
  --on-art-faint: #a89c85;
  --on-art-accent: var(--ember-300);
  --ctl-on-art-bg: rgba(24, 18, 9, .45);
  --ctl-on-art-border: rgba(232, 220, 192, .26);

  /* Tints that must read in both worlds. A hardcoded rgba() built for the dark
     room turns invisible on paper (a cream wash on cream) and vice versa, so
     every wash, rail and quiet fill goes through these instead. */
  --tint-gold-weak: rgba(240, 169, 74, .08);
  --tint-gold: rgba(240, 169, 74, .11);
  --rail-track: rgba(232, 220, 192, .18);
  --wash-quiet: rgba(232, 220, 192, .05);
  --scrim-on-art: rgba(12, 11, 7, .66);

  /* Partner logos are supplied as dark line-art on transparent, so on the dark
     ground they must be lit to a cream silhouette. Monochrome is also the right
     treatment for a partner row: the two marks read as peers instead of one
     black plate beside one green flower. */
  --logo-treatment: brightness(0) invert(1) opacity(.86);

  /* Qur'anic text on a theme-following surface: warm cream in the dark room,
     warm brown on paper. --ember-* is a fixed ramp and fails AA on paper. */
  --ayah-ink: var(--ember-100);
}
html[data-theme="light"] {
  --surface-page: #fdf7ec;
  --surface-deeper: #f7eddc;
  --surface-raised: #fffefa;

  /* Literal values, not var() chains: a chain onto an undefined step resolves
     to the inherited (dark-room) colour and silently fails AA on paper. */
  --text-body: #2a2114;
  --text-strong: #16110a;
  --text-muted: #5c4f3a;
  --text-faint: #74654c;
  --text-accent: #8a4718;
  --text-link: #8a4718;
  --text-link-hover: #6d3711;
  --ayah-ink: #33270f;

  --border-hairline: #e5dac4;
  --border-strong: #d8c9ab;
  --border-gold: rgba(184, 147, 88, .55);

  --haze-dawn: #fffdf7;
  --haze-lamp: #fdf3e2;
  --haze-dusk: #f7eddc;
  --haze-ember: #f9ecd8;

  --chrome-bg: rgba(253, 247, 236, .94);
  --chrome-fade: rgba(253, 247, 236, .9);

  --shadow-inset-line: inset 0 -1px 0 #e5dac4;

  /* Paper needs a warmer, darker wash: the dark-room values vanish on cream. */
  --tint-gold-weak: rgba(138, 71, 24, .07);
  --tint-gold: rgba(138, 71, 24, .11);
  --rail-track: rgba(42, 33, 20, .14);
  --wash-quiet: rgba(42, 33, 20, .04);

  /* On paper the artwork's own dark value is correct; only flatten to one ink so
     the pair still reads as peers. */
  --logo-treatment: brightness(0) opacity(.78);
}