/* Generated by scripts/tokens.mjs from tokens/marko.tokens.json. Don't edit: change the tokens, then run `node scripts/tokens.mjs`. */
/* The landing page's colours, light and dark (the web group), for styles.css. */

:root {
  --bg: #ffffff;
  --bg-alt: #f6f5fa;
  --surface: #ffffff;
  --surface-sunk: #f4f4f5;
  --border: #e2e2e6;
  --border-strong: #b9bac0;
  --text: #120e24;
  --text-secondary: #5d6068;
  --text-tertiary: #6d7075;
  --violet: #5b33ff;
  --violet-deep: #3a0fa6;
  --violet-ink: #4a22e8;
  --violet-soft: #ece7ff;
  --on-violet: #ffffff;
  --accent-fill: linear-gradient(180deg, #5b33ff, #3a0fa6);
  --active: #bef000;
  --on-active: #111113;
  --active-ink: #4a7000;
  --active-soft: #eef8cc;
  --active-focus: #5a8a00;
  --danger: #c93636;
  --change: #fff4d6;
  --run: #2284bb;
  --ride: #145a9f;
  --strength: #a6478d;
  --rest: #b5b8be;
  --shadow: 0 1px 2px rgb(18 14 36 / 6%), 0 12px 32px -8px rgb(26 10 92 / 18%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0920;
    --bg-alt: #110d29;
    --surface: #17132e;
    --surface-sunk: #1e1938;
    --border: #2a2550;
    --border-strong: #4a4470;
    --text: #eeebff;
    --text-secondary: #aaa6c4;
    --text-tertiary: #8f8aab;
    --violet: #8a6bff;
    --violet-deep: #5b33ff;
    --violet-ink: #a891ff;
    --violet-soft: #231a52;
    --on-violet: #0c0920;
    --accent-fill: #8a6bff;
    --active: #ccff00;
    --active-ink: #ccff00;
    --active-soft: #232c0a;
    --active-focus: #ccff00;
    --danger: #ff6b6b;
    --change: #3a3216;
    --run: #aad8f7;
    --ride: #74a8e5;
    --strength: #df95c9;
    --rest: #5e6168;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 40px -12px rgb(0 0 0 / 60%);
  }
}