:root{
  /* --- Base: night (the shop after dark; matches the gold-on-black logo) --- */
  --night-900:#0C0A08;
  --night-800:#12100D;
  --night-700:#1A1611;
  --night-600:#241E17;
  --night-500:#332A20;
  --night-400:#4A3D2E;

  /* --- Base: paper (warm, never pure white — brief §4) --- */
  --paper-100:#FBF7F2;
  --paper-200:#F2E9DD;
  --paper-300:#F1E3CF;
  --paper-400:#E0CDB4;

  /* --- Base: gold (sampled from the client logo's metallic gradient) --- */
  --gold-200:#F0DCB4;
  --gold-300:#E8CE9A;
  --gold-400:#D4AF6A;
  --gold-500:#C08F4A;
  --gold-600:#96662D;

  /* --- Base: terracotta (brief accent, for warm light surfaces) --- */
  --clay-400:#C07A45;
  --clay-500:#9D5B28;
  --clay-600:#7C4620;

  /* --- Base: ink (type on light) --- */
  --ink-900:#22190F;
  --ink-600:#5F4C36;
  --ink-400:#816E53;

  /* --- Base: semantic hues (earthy, never neon) --- */
  /* The -500 step is a FILL: swatches, dots, left rules, 1px borders.
     The -300 step is INK: the same hue lifted to ~L*76 so it clears 4.5:1 as
     small text over its own 16%-alpha tint on a dark ground. Never use -500 for
     type below headline scale. */
  --moss-500:#5A7F4E;
  --moss-300:#9DC48F;
  --moss-100:#E7EEE2;
  --amber-500:#C9922B;
  --amber-300:#E8BE6B;
  --amber-100:#F7EBD2;
  --rust-500:#A33B2A;
  --rust-300:#E39182;
  --rust-100:#F5E3DF;
  --slate-500:#4A6B7A;
  --slate-300:#9FBECD;
  --slate-100:#E3EBEF;

  /* --- Semantic: dark surfaces (default context) --- */
  --bg-page:var(--night-900);
  --bg-surface:var(--night-800);
  --bg-raised:var(--night-700);
  --bg-sunken:#080706;
  --bg-hover:var(--night-600);
  --text-primary:#F5EADA;
  --text-secondary:#BFAE95;
  --text-muted:#8E7F6C;
  --text-on-accent:var(--night-900);
  --border-subtle:rgba(212,175,106,.14);
  --border-default:rgba(212,175,106,.26);
  --border-strong:var(--gold-500);

  /* --- Semantic: light surfaces (secondary context) --- */
  --bg-paper:var(--paper-100);
  --bg-paper-surface:var(--paper-200);
  --bg-paper-highlight:var(--paper-300);
  --text-on-paper:var(--ink-900);
  --text-on-paper-soft:var(--ink-600);
  --border-paper:var(--paper-400);

  /* --- Semantic: brand roles --- */
  --accent:var(--gold-400);
  --accent-hover:var(--gold-300);
  --accent-press:var(--gold-500);
  --accent-quiet:rgba(212,175,106,.12);
  /* Gold on paper needs the darkened -600 step to clear 4.5:1; the -400 accent
     measures 1.94:1 on paper and must never carry type there. */
  --accent-on-paper:var(--gold-600);
  --accent-alt:var(--clay-500);

  /* --- Semantic: status ---
     -*  = fill role (dots, rules, swatches)
     -*-text = ink role, for any type at body scale or smaller
     -*-bg = the 16%-alpha tint the ink sits on */
  --status-open:var(--moss-500);
  --status-open-text:var(--moss-300);
  --status-open-bg:rgba(90,127,78,.16);
  --status-busy:var(--amber-500);
  --status-busy-text:var(--amber-300);
  --status-busy-bg:rgba(201,146,43,.16);
  --status-closed:var(--rust-500);
  --status-closed-text:var(--rust-300);
  --status-closed-bg:rgba(163,59,42,.16);
  --status-info:var(--slate-500);
  --status-info-text:var(--slate-300);
  --status-info-bg:rgba(74,107,122,.16);

  /* --- Decorative gradients: metallic only, never hue-shifting --- */
  --grad-gold:linear-gradient(180deg,#F0DCB4 0%,#D4AF6A 42%,#96662D 100%); /* @kind color */
  --grad-gold-rule:linear-gradient(90deg,rgba(212,175,106,0) 0%,var(--gold-500) 50%,rgba(212,175,106,0) 100%); /* @kind color */
  --grad-protect:linear-gradient(90deg,rgba(12,10,8,.92) 0%,rgba(12,10,8,.72) 45%,rgba(12,10,8,0) 100%); /* @kind color */
  --grad-protect-bottom:linear-gradient(180deg,rgba(12,10,8,0) 0%,rgba(12,10,8,.85) 100%); /* @kind color */
}
/* Light section scope: drop this class on any band that sits on paper. */
.bb-on-paper{
  --bg-page:var(--paper-100);
  --bg-surface:var(--paper-100);
  --bg-raised:#FFFDFA;
  --bg-hover:var(--paper-200);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-400);
  --border-subtle:rgba(224,205,180,.7);
  --border-default:var(--paper-400);
  --border-strong:var(--gold-600);
  --accent:var(--gold-600);
  --accent-hover:var(--clay-500);
  --accent-press:var(--clay-600);
  --accent-quiet:rgba(157,107,47,.1);
  --text-on-accent:var(--paper-100);
}