/* Shared design tokens: light / dark / system (Big or Small product pages). */
:root, html[data-theme="light"]{
  --bg: #F5F2ED;
  --surface: #FFFDF9;
  --surface-2: #EFEAE1;
  --ink: #1C1B19;
  --ink-2: #4A473F;
  --ink-3: #8A8578;
  --line: #E3DCCF;
  --line-2: #CDC4B2;
  --ink-on-dark-bg: rgba(245,242,237,.7);
  --ink-on-dark-bg-strong: rgba(245,242,237,.9);
  --scrim: rgba(28,27,25,.55);
  --win: #2F7A3E;
  --win-soft: #DCEAD8;
  --lose: #B23B2C;
  --lose-soft: #F2D9D2;
  --tie: #6B6355;
  --tie-soft: #E6E0D0;
}
html[data-theme="dark"]{
  --bg: #15141A;
  --surface: #1E1D24;
  --surface-2: #2A2830;
  --ink: #F3EFE6;
  --ink-2: #C4BEB1;
  --ink-3: #7C7769;
  --line: #2E2C36;
  --line-2: #454350;
  --ink-on-dark-bg: rgba(21,20,26,.7);
  --ink-on-dark-bg-strong: rgba(21,20,26,.9);
  --scrim: rgba(0,0,0,.7);
  --win: #6EC27A;
  --win-soft: #1F3A26;
  --lose: #E57565;
  --lose-soft: #3F1F1C;
  --tie: #A29A88;
  --tie-soft: #2B2822;
}
@media (prefers-color-scheme: dark){
  html[data-theme="system"]{
    --bg: #15141A;
    --surface: #1E1D24;
    --surface-2: #2A2830;
    --ink: #F3EFE6;
    --ink-2: #C4BEB1;
    --ink-3: #7C7769;
    --line: #2E2C36;
    --line-2: #454350;
    --ink-on-dark-bg: rgba(21,20,26,.7);
    --ink-on-dark-bg-strong: rgba(21,20,26,.9);
    --scrim: rgba(0,0,0,.7);
    --win: #6EC27A;
    --win-soft: #1F3A26;
    --lose: #E57565;
    --lose-soft: #3F1F1C;
    --tie: #A29A88;
    --tie-soft: #2B2822;
  }
}