/* ── Homebrewed · theme.css ──────────────────────────────────────────────────
   The single source of truth for the palette and shell metrics. Every page
   links this INSTEAD of defining its own :root palette.

   Include it in the <head> BEFORE the page's own <style>, so a page can still
   override a token locally on the rare occasion it genuinely needs to:

       <link rel="stylesheet" href="/theme.css?v=1">

   Root-absolute on purpose — the identical href works from /, /app/ and
   /play/, same as /fx-engine.js. Bump the ?v= when you change a value, or
   cached browsers keep serving the old palette.
   ──────────────────────────────────────────────────────────────────────────── */
:root{
  /* ── Grounds: darkest → lightest ──────────────────────────────────────── */
  --bg:      #0a0c12;   /* page background                       */
  --panel:   #111420;   /* raised surface: cards, bars, modals   */
  --panel2:  #161a26;   /* hover / secondary surface             */
  --panel3:  #1c2130;   /* active / pressed surface              */

  /* ── Gold: the brand accent ───────────────────────────────────────────── */
  --gold:    #c9a84c;   /* accent, headings, active state        */
  --goldb:   #f0c868;   /* bright: hover, emphasis               */
  --goldd:   #a08840;   /* dim: disabled, subtle accents         */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text:    #f0deb8;   /* primary                               */
  --text2:   #c0aa78;   /* secondary — floor for body copy, 13px */
  --textd:   #8a7860;   /* dim — captions and hints only         */

  /* ── Lines ────────────────────────────────────────────────────────────── */
  --border:  #2a2e42;   /* neutral rule                          */
  --borderg: #6a5828;   /* gold rule                             */

  /* ── Shell metrics ────────────────────────────────────────────────────── */
  --top-h:   68px;      /* top nav height                        */
}

/* ── Compatibility aliases ───────────────────────────────────────────────────
   dashboard.html and session-notes.html were written against a longer naming
   scheme for the SAME colours, and article-editor/timeline reach for a couple
   of those names too. These alias onto the canonical tokens above so both
   vocabularies resolve to ONE definition.

   Because they're defined with var(), a page that locally overrides (say)
   --borderg automatically gets the matching --border-gold. Migrate those pages
   onto the short names when convenient, then delete this block.
   ──────────────────────────────────────────────────────────────────────────── */
:root{
  --bg-base:        var(--bg);
  --bg-panel:       var(--panel);
  --bg-panel-hover: var(--panel2);
  --bg-hover:       var(--panel2);
  --bg-active:      var(--panel3);
  --border-dim:     var(--border);
  --border-gold:    var(--borderg);
  --gold-bright:    var(--goldb);
  --gold-dim:       var(--goldd);
  --text-primary:   var(--text);
  --text-secondary: var(--text2);
  --text-dim:       var(--textd);
}
