/* House of Xpression — colour system.
   Weighting: ~80% neutral axis (Porzellan / Creme / Grau / Noir).
   Blutrot is THE single warm accent — always saturated, never hairline-thin, never milky.
   Gold appears only as fine accents: lines, numerals, edges. Never as a filled area. */
:root {
  /* ── Neutral axis ─────────────────────────────── */
  --hox-porzellan: #F6F6F4;
  --hox-creme: #F1EEED;
  --hox-greige: #A3A39E;
  --hox-noir-grau: #4A4A4A;
  --hox-noir: #0A0A0A;

  /* ── Accent ───────────────────────────────────── */
  --hox-blutrot: #7C150C;
  --hox-blutrot-deep: #5C0F08;

  /* ── Gold ─────────────────────────────────────── */
  --hox-gold-1: #F8F1D8;
  --hox-gold-2: #E6D5A0;
  --hox-gold-3: #C2A75E;
  --hox-gold-4: #F0E7C2;
  --hox-gold-5: #CDB876;
  --hox-gold-dark: #A8863E;
  --hox-gold-gradient: linear-gradient(120deg, var(--hox-gold-1) 0%, var(--hox-gold-2) 26%, var(--hox-gold-3) 50%, var(--hox-gold-4) 74%, var(--hox-gold-5) 100%); /* @kind other */

  /* ── Semantic surfaces ────────────────────────── */
  --surface-page: var(--hox-porzellan);
  --surface-raised: var(--hox-creme);
  --surface-calm: var(--hox-greige);
  --surface-tile: var(--hox-noir-grau);
  --surface-cover: var(--hox-noir);

  /* ── Semantic text ────────────────────────────── */
  --text-body: #232323;
  --text-strong: var(--hox-noir);
  --text-muted: #6E6E6A;
  --text-on-dark: var(--hox-creme);
  --text-on-dark-muted: rgba(241, 238, 237, 0.62);
  --text-accent: var(--hox-blutrot);

  /* ── Lines & edges ────────────────────────────── */
  --line-hairline: rgba(10, 10, 10, 0.14);
  --line-hairline-on-dark: rgba(241, 238, 237, 0.18);
  --line-accent: var(--hox-blutrot);
  --line-gold: var(--hox-gold-dark);
  --line-gold-on-dark: var(--hox-gold-3);

  /* ── Interaction ──────────────────────────────── */
  --state-hover-on-light: var(--hox-blutrot-deep);
  --state-hover-on-dark: var(--hox-gold-2);
  --focus-ring: var(--hox-gold-dark);

  /* ── Photographic overlays ────────────────────── */
  --veil-noir-60: rgba(10, 10, 10, 0.60);
  --veil-noir-30: rgba(10, 10, 10, 0.30);
  --veil-protect-bottom: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.55) 38%, rgba(10, 10, 10, 0) 100%); /* @kind other */
  --veil-protect-center: radial-gradient(120% 80% at 50% 60%, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.18) 70%, rgba(10, 10, 10, 0) 100%); /* @kind other */
  --vignette: radial-gradient(110% 90% at 50% 45%, rgba(10, 10, 10, 0) 35%, rgba(10, 10, 10, 0.42) 100%); /* @kind other */
}