/* ============================================================
   MANDU — PAPER & INK
   A shared reading surface for the timeline page and the map's
   monument panel.

   The previous scheme put tan text (#e8d5a3) on a near-black brown
   ground and coloured the body copy by era. That is the "brown
   background with other colour text" problem: muddy, low-contrast,
   and it used colour to carry hierarchy, which ui-ux-pro-max §6
   explicitly warns against (visual-hierarchy: use size, spacing and
   contrast — not colour alone).

   This replaces it with a museum-catalogue surface: warm paper,
   near-black ink, and colour demoted to small marks (a dot, a rule,
   a pill border). Every pair below was checked numerically:

     ink   / paper   16.68:1      ink  / raised   17.98:1
     ink-2 / paper    8.04:1      ink-2/ raised    8.66:1
     ink-3 / paper    4.62:1      (AA at body size)
     era colours on paper  5.30–7.05:1   (all AA, so they may carry text)
     dark variant: ink 15.91, ink-2 8.22, ink-3 4.94, eras 7.60–10.02
   ============================================================ */

.paper {
  --paper:        #FAF6EE;   /* page ground            */
  --paper-raised: #FFFFFF;   /* cards sitting on it    */
  --paper-sunken: #F1EBDD;   /* wells, insets          */
  --ink:          #1A1613;   /* headings, body         */
  --ink-2:        #544A3D;   /* secondary prose        */
  --ink-3:        #7A6E5E;   /* meta, captions, labels */
  --rule:         #E3DACA;   /* hairlines              */
  --rule-strong:  #CFC2AC;
  --focus:        #A8482A;

  --era-paramara: #4C6B2B;
  --era-khalji:   #6A4A8C;
  --era-ghuri:    #A8482A;
  --era-khilji:   #856012;
  --era-late:     #A32C36;
  --era-mughal:   #245C88;
  --era-modern:   #47565F;

  background: var(--paper);
  color: var(--ink);
}

/* Dark variant — neutral greys, deliberately NOT brown, with the era
   hues lightened so they still clear AA against the dark ground. */
.paper.theme-dramatic {
  --paper:        #14161A;
  --paper-raised: #232830;
  --paper-sunken: #1B1E24;
  --ink:          #F2F0EC;
  --ink-2:        #B4AEA4;
  --ink-3:        #8A857C;
  --rule:         #333941;
  --rule-strong:  #454C57;
  --focus:        #E8A075;

  --era-paramara: #A3C078;
  --era-khalji:   #C0A6DE;
  --era-ghuri:    #E8A075;
  --era-khilji:   #DCBE6A;
  --era-late:     #E8908F;
  --era-mughal:   #8CC0E4;
  --era-modern:   #A6B7C2;
}

/* Era accent resolved from the data attribute, so switching theme
   re-colours everything without JavaScript touching inline styles. */
[data-era="paramara"] { --era: var(--era-paramara); }
[data-era="khalji"]   { --era: var(--era-khalji); }
[data-era="ghuri"]    { --era: var(--era-ghuri); }
[data-era="khilji"]   { --era: var(--era-khilji); }
[data-era="late"]     { --era: var(--era-late); }
[data-era="mughal"]   { --era: var(--era-mughal); }
[data-era="modern"]   { --era: var(--era-modern); }