/* Design tokens: design/source/Design-system.dc.html, sections 1-3 */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --text: #1A1B1E;
  --text2: #5B5E66;
  --border: #D8DAE0;
  --bstrong: #767A84;
  --fill: #EAEAEA;
  --fillHover: #DCDCDC;
  --accent: #26292E;
  --accentHover: #3A3E45;
  --accentText: #FFFFFF;
  --error: #B3261E;
  --slider: #26292E;
  --sliderContrast: #FFFFFF;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15161A;
  --surface: #1E2025;
  --text: #EDEDEF;
  --text2: #A6A9B2;
  --border: #34363D;
  --bstrong: #6B6E78;
  --fill: #2C2F35;
  --fillHover: #383C44;
  --accent: #F2F3F5;
  --accentHover: #FFFFFF;
  --accentText: #16171A;
  --error: #FF8A80;
  --slider: #26292E;
  --sliderContrast: #FFFFFF;
}

:root {
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --colw: 760px;
  --radius: 8px;
  --tr: 150ms;
  /* phone < 640 */
  --pad: 16px;
  --h1: 30px;
  --h1lh: 38px;
  --cmpK: 0.7;
  --btnW: 100%;
  --hdrShift: -12px;
}

/* tablet 640-1023 */
@media (min-width: 640px) {
  :root {
    --pad: 32px;
    --h1: 36px;
    --h1lh: 44px;
    --cmpK: 0.75;
    --btnW: auto;
    --hdrShift: 0px;
  }
}

/* desktop >= 1024 */
@media (min-width: 1024px) {
  :root {
    --pad: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tr: 0ms;
  }
}