/* Design tokens, shared by the app (styles.css imports this file; Vite inlines it) and the static
   guide pages (scripts/build_pages.mjs prepends it to guides.css). Dark is the default; light comes
   from the phone's setting or html[data-theme]; tints (src/theme.js) write the same var names on
   <html>, which overrides :root. Nothing here is renamed: every var below is used by the app. */
:root{--serif:'Lora',Georgia,serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
  --bg:#24163A; --bg2:#1B1030; --panel:#32224F; --row:#3B2A5B; --row2:#463466; --chip:#4A3670; --chip-on:#F3EBFF; --chip-on-ink:#24163A;
  --ink:#F3EBFF; --ink2:#B8A8D8; --line:#55407A;
  --gold:#F0B94A; --gold-ink:#3A2A05; --emerald:#3FC28C; --sapphire:#5EA3F5; --ruby:#F06A88; --amethyst:#C39BFF;
  --c-C:#B0A4CC; --c-U:#4FD097; --c-R:#63ACF7; --c-E:#C39BFF; --c-L:#F0B94A;
  --p-M:#F2CF7E; --p-D:#7FCBE0; --p-E:#EE8E63; --p-N:#7A69E0;
  --glow1:rgba(63,194,140,.22); --glow2:rgba(94,163,245,.18); --glow3:rgba(240,185,74,.12);
  --shadow:0 1px 0 rgba(0,0,0,.25);
  /* Derived: tints of the accent and rarity colours, so they follow the scheme and any tint theme. */
  --tint-gold:color-mix(in srgb,var(--gold) 14%,transparent);
  --tint-rule:color-mix(in srgb,var(--amethyst) 12%,transparent);
  --tint-wanted:color-mix(in srgb,var(--ruby) 12%,transparent);
  --tint-C:color-mix(in srgb,var(--c-C) 16%,transparent); --tint-U:color-mix(in srgb,var(--c-U) 16%,transparent); --tint-R:color-mix(in srgb,var(--c-R) 16%,transparent); --tint-E:color-mix(in srgb,var(--c-E) 16%,transparent); --tint-L:color-mix(in srgb,var(--c-L) 16%,transparent);
  --r-chip:999px; --r-ctl:10px; --r-card:14px; --r-hero:20px; --r-art:24px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#EFE8F6; --bg2:#E6DDF0; --panel:#F9F5FD; --row:#FFFFFF; --row2:#F3EDFA; --chip:#DED3EC; --chip-on:#2A1A3E; --chip-on-ink:#F3EBFF;
    --ink:#2A1A3E; --ink2:#67578A; --line:#D3C6E4;
    --gold:#D89A22; --gold-ink:#FFFFFF; --emerald:#1E9A69; --sapphire:#2F6FD1; --ruby:#C93D5E; --amethyst:#7B55D6;
    --c-C:#6E6386; --c-U:#1E9A69; --c-R:#2F6FD1; --c-E:#7B55D6; --c-L:#B27A0E;
    --glow1:rgba(63,194,140,.18); --glow2:rgba(94,163,245,.16); --glow3:rgba(240,185,74,.14);
    --shadow:0 1px 0 rgba(42,26,62,.06);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EFE8F6; --bg2:#E6DDF0; --panel:#F9F5FD; --row:#FFFFFF; --row2:#F3EDFA; --chip:#DED3EC; --chip-on:#2A1A3E; --chip-on-ink:#F3EBFF;
  --ink:#2A1A3E; --ink2:#67578A; --line:#D3C6E4;
  --gold:#D89A22; --gold-ink:#FFFFFF; --emerald:#1E9A69; --sapphire:#2F6FD1; --ruby:#C93D5E; --amethyst:#7B55D6;
  --c-C:#6E6386; --c-U:#1E9A69; --c-R:#2F6FD1; --c-E:#7B55D6; --c-L:#B27A0E;
  --glow1:rgba(63,194,140,.18); --glow2:rgba(94,163,245,.16); --glow3:rgba(240,185,74,.14);
  --shadow:0 1px 0 rgba(42,26,62,.06);
}