:root{
  /* --- Brand base --------------------------------------------------- */
  --black:#111111;          /* Primary Black  */
  --gold:#D4A63A;           /* Premium Gold   */
  --white:#FFFFFF;
  --gray:#6B6B6B;
  --gray-light:#F4F4F4;

  /* --- Ink ramp (black surfaces) ------------------------------------ */
  --ink-950:#0A0A0A;
  --ink-900:#111111;
  --ink-850:#171717;
  --ink-800:#1D1D1D;
  --ink-700:#262626;
  --ink-600:#333333;

  /* --- Gold ramp ---------------------------------------------------- */
  --gold-700:#9A731D;
  --gold-600:#B88C26;
  --gold-500:#D4A63A;
  --gold-400:#E0B856;
  --gold-300:#EBCE86;
  --gold-100:#F7EFD9;

  /* --- Neutral ramp ------------------------------------------------- */
  --gray-700:#4A4A4A;
  --gray-600:#5C5C5C;
  --gray-500:#6B6B6B;
  --gray-400:#8E8E8E;
  --gray-300:#C9C9C9;
  --gray-200:#E4E4E4;
  --gray-100:#F4F4F4;
  --gray-50:#FAFAFA;

  /* --- Semantic (kept intentionally small; the brand has no
         success/warning/danger palette of its own) ------------------- */
  --semantic-positive:#2F7A4B;
  --semantic-negative:#A32F2F;

  /* --- Surfaces ----------------------------------------------------- */
  --bg-page:var(--white);
  --bg-page-alt:var(--gray-100);
  --bg-stage:var(--ink-900);        /* the "stage" black band          */
  --surface-card:var(--white);
  --surface-card-alt:var(--gray-100);
  --surface-card-stage:var(--ink-850);
  --surface-inset:var(--gray-50);

  /* --- Text --------------------------------------------------------- */
  --text-strong:var(--ink-900);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-500);
  --text-on-stage:var(--white);
  --text-on-stage-muted:var(--gray-300);
  --text-accent:var(--gold-500);
  --text-accent-on-light:var(--gold-600);
  --text-inverse:var(--white);

  /* --- Accent / interactive ---------------------------------------- */
  --accent:var(--gold-500);
  --accent-hover:var(--gold-400);
  --accent-press:var(--gold-600);
  --accent-soft:var(--gold-100);
  --on-accent:var(--ink-900);       /* gold buttons take BLACK text    */

  /* --- Lines & borders --------------------------------------------- */
  --border-subtle:var(--gray-200);
  --border-strong:var(--ink-900);
  --border-accent:var(--gold-500);
  --border-on-stage:rgba(255,255,255,.14);
  --rule-accent:var(--gold-500);    /* the 2px gold hairline motif     */

  /* --- Focus -------------------------------------------------------- */
  --focus-ring:var(--gold-500);
  --focus-ring-on-stage:var(--gold-400);

  /* --- Overlays / protection --------------------------------------- */
    --scrim-stage:linear-gradient(90deg,rgba(17,17,17,.94) 0%,rgba(17,17,17,.72) 45%,rgba(17,17,17,.15) 100%);/* @kind other */
    --scrim-bottom:linear-gradient(180deg,rgba(17,17,17,0) 0%,rgba(17,17,17,.85) 100%);/* @kind other */
}

/* Stage scope: drop this class on any black section and text/border
   semantics flip without touching component code. */
.s5-stage{
  --bg-page:var(--ink-900);
  --bg-page-alt:var(--ink-850);
  --surface-card:var(--ink-850);
  --surface-card-alt:var(--ink-800);
  --surface-inset:var(--ink-800);
  --text-strong:var(--white);
  --text-body:var(--gray-300);
  --text-muted:var(--gray-400);
  --border-subtle:rgba(255,255,255,.14);
  --border-strong:var(--white);
  --focus-ring:var(--gold-400);
  color:var(--white);
  background:var(--ink-900);
}