/* Design tokens: palette, themes, type stacks. */
  :root{
    --bg:#F4F1E8; --panel:#FFFDF7; --sunk:#EDE7D8; --ink:#23301F; --muted:#6C7A63;
    --hair:#DFD8C6; --hair2:#C9C0A9;
    --gold:#C9922E; --gold-lt:#F0C24A; --leaf:#3F7A3A; --leaf-dk:#2C5A2A;
    --rose:#C4607A; --sky:#4A78B8;
    --r-common:#4F7F46; --r-rare:#3F62B0; --r-epic:#7E4FB8;
    --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
    --body:"Karla","Helvetica Neue",Arial,sans-serif;
    --mono:"IBM Plex Mono",Menlo,monospace;
    --shadow:0 2px 0 var(--hair2);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#161A15; --panel:#1E241C; --sunk:#161B15; --ink:#E9EFE4; --muted:#9DAC96;
      --hair:#2E362B; --hair2:#3D473A;
      --gold:#E4B053; --gold-lt:#F5CE71; --leaf:#6FB25F; --leaf-dk:#8FCB80;
      --rose:#E08AA0; --sky:#7FA6E0;
      --r-common:#74B064; --r-rare:#7E9BE4; --r-epic:#B489E8;
      --shadow:0 2px 0 #12160F;
    }
  }
  :root[data-theme="dark"]{
    --bg:#161A15; --panel:#1E241C; --sunk:#161B15; --ink:#E9EFE4; --muted:#9DAC96;
    --hair:#2E362B; --hair2:#3D473A;
    --gold:#E4B053; --gold-lt:#F5CE71; --leaf:#6FB25F; --leaf-dk:#8FCB80;
    --rose:#E08AA0; --sky:#7FA6E0;
    --r-common:#74B064; --r-rare:#7E9BE4; --r-epic:#B489E8;
    --shadow:0 2px 0 #12160F;
  }