/* GENERATED by design/build-tokens.mjs from design/tokens.json. Do not edit. */
:root {
  color-scheme: dark;

  --canvas: #0b0b0d;
  --card-fill: rgb(255 255 255 / 5.5%);
  --card-fill-opaque: #18181a;
  --card-stroke: rgb(255 255 255 / 8.0%);
  --primary-text: rgb(255 255 255 / 100.0%);
  --secondary-text: rgb(255 255 255 / 78.0%);
  --tertiary-text: rgb(255 255 255 / 58.0%);
  --tint-diamond: #6b99ff;
  --tint-sunset: #ff8c59;
  --tint-forest: #59d199;
  --tint-grape: #b585ff;

  --card-radius: 24px;
  --card-padding: 18px;
  --gutter: 16px;
  --stack-spacing: 14px;
  --bottom-inset: 152px;
  --stroke-width: 0.5px;
}

/* Light, for anyone whose system asks for it. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --canvas: #f2f2f7;
    --card-fill: rgb(0 0 0 / 4.0%);
    --card-fill-opaque: #ffffff;
    --card-stroke: rgb(0 0 0 / 10.0%);
    --primary-text: rgb(0 0 0 / 92.0%);
    --secondary-text: rgb(0 0 0 / 70.0%);
    --tertiary-text: rgb(0 0 0 / 58.0%);
    --tint-diamond: #2966d1;
    --tint-sunset: #b84f14;
    --tint-forest: #12734a;
    --tint-grape: #703bc2;
  }
}

/* And the explicit choice, which wins over both of the above. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --canvas: #0b0b0d;
  --card-fill: rgb(255 255 255 / 5.5%);
  --card-fill-opaque: #18181a;
  --card-stroke: rgb(255 255 255 / 8.0%);
  --primary-text: rgb(255 255 255 / 100.0%);
  --secondary-text: rgb(255 255 255 / 78.0%);
  --tertiary-text: rgb(255 255 255 / 58.0%);
  --tint-diamond: #6b99ff;
  --tint-sunset: #ff8c59;
  --tint-forest: #59d199;
  --tint-grape: #b585ff;
}

:root[data-theme='light'] {
  color-scheme: light;

  --canvas: #f2f2f7;
  --card-fill: rgb(0 0 0 / 4.0%);
  --card-fill-opaque: #ffffff;
  --card-stroke: rgb(0 0 0 / 10.0%);
  --primary-text: rgb(0 0 0 / 92.0%);
  --secondary-text: rgb(0 0 0 / 70.0%);
  --tertiary-text: rgb(0 0 0 / 58.0%);
  --tint-diamond: #2966d1;
  --tint-sunset: #b84f14;
  --tint-forest: #12734a;
  --tint-grape: #703bc2;
}