/* Design tokens: palette, themes, type stacks.
   The whole interface is 8-bit: bitmap type, hard edges, no blur and no radius.
   Three constants below carry that, and the rest of the CSS reads them rather
   than hardcoding an edge or a shadow, so the look moves from one place. */
  :root{
    /* cream ground across the whole app (by brief); green stays as the accent */
    --bg:#F7F1DF; --panel:#FFFBEF; --sunk:#EFE6CF; --ink:#25361F; --muted:#6E7A55;
    --hair:#DED3B4; --hair2:#B9AA85;
    --gold:#EFC96F; --gold-lt:#F9E3A8; --leaf:#7CC06B; --leaf-dk:#3D7834;
    --rose:#E59BAA; --sky:#4C82BE;
    /* A pastel is a FILL, not a text colour: --gold on --bg is 1.3:1. These two are
       the same hues pulled dark enough to read as type on a pale background; in dark
       mode the pastels already contrast, so they stay as they are. */
    --gold-ink:#8A6714; --rose-ink:#B8506A;
    /* the yard frame and header strip; the yard itself is now sky and grass */
    --cream:#F7F1DF; --cream-line:#DED3B4;
    --r-common:#7CC06B; --r-rare:#93AEE6; --r-epic:#BB9BE2; --r-starter:#B9C9B2;
    /* Every accent is a pastel now, so text ON an accent has to be dark rather
       than white — one token, used by buttons, chips and rarity tags in both themes. */
    --on-accent:#17280F;

    /* One typeface, Nunito, at three weights: headings heavy, body regular, and
       small uppercase labels bold. (The art stays pixel art; the type does not.) */
    --display:"Nunito",system-ui,sans-serif;
    --body:"Nunito",system-ui,sans-serif;
    --mono:"Nunito",system-ui,sans-serif;

    /* the 8-bit trio: a chunky border, a hard offset shadow, no radius anywhere */
    --edge:2px;
    --shadow:3px 3px 0 var(--hair2);
    --shadow-sm:2px 2px 0 var(--hair2);
    --shadow-lg:6px 6px 0 var(--hair2);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#151E16; --panel:#1F2B20; --sunk:#121A13; --ink:#E3F1DD; --muted:#9BB694;
      --hair:#31422E; --hair2:#0B110C;
      --gold:#EFD08A; --gold-lt:#F8E6B4; --leaf:#8FD07E; --leaf-dk:#ABE09C;
      --rose:#E9A7B6; --sky:#9DC0E6;
      --gold-ink:#EFD08A; --rose-ink:#E9A7B6;
      --cream:#EFE6CF; --cream-line:#CFC3A3;
      --r-common:#8FD07E; --r-rare:#9DB6EA; --r-epic:#C3A4E6; --r-starter:#8FA089; --r-starter:#8FA089;
      --on-accent:#17280F;
    }
  }
  :root[data-theme="dark"]{
    --bg:#151E16; --panel:#1F2B20; --sunk:#121A13; --ink:#E3F1DD; --muted:#9BB694;
    --hair:#31422E; --hair2:#0B110C;
    --gold:#EFD08A; --gold-lt:#F8E6B4; --leaf:#8FD07E; --leaf-dk:#ABE09C;
    --rose:#E9A7B6; --sky:#9DC0E6;
    --gold-ink:#EFD08A; --rose-ink:#E9A7B6;
    --cream:#EFE6CF; --cream-line:#CFC3A3;
    --r-common:#8FD07E; --r-rare:#9DB6EA; --r-epic:#C3A4E6; --r-starter:#8FA089;
    --on-accent:#17280F;
  }