/* Tessera Fit design tokens (website/DESIGN.md). Shared by the website and the app.
   Values are checked against website/site/styles.css by packages/tokens/test. */
:root {
  color-scheme: dark light;
  --grout: #10201b; --grout-deep: #0b1612; --raised: #182c25; --raised-2: #203630;
  --line: #2a4038; --line-strong: #4d6259;
  --bone: #ede8df; --text: var(--bone); --text-2: #cfd8d3; --text-3: #a7b5ae;
  --link: #7fc8b5; --focus: #7fc8b5; --action: #17805b; --action-hover: #146e4f; --rest: #1b2e28;

  --emerald: #1f9d6f; --sea-glass: #7fc8b5; --ochre: #d9a441; --terracotta: #c8623e; --slate: #4a6fa5; --later: #7e8f87;
  --t-terracotta: #b4532f;

  --edge-api: var(--emerald); --edge-shortcut: var(--sea-glass); --edge-export: var(--ochre); --edge-upload: var(--slate); --edge-later: var(--later);
  --sport-gym: var(--ochre); --sport-run: var(--terracotta); --sport-ride: var(--slate); --sport-swim: var(--sea-glass); --sport-multisport: var(--emerald);

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 6px;
}

@media (prefers-color-scheme: light) {
  :root {
    --grout: #f2f1ec; --grout-deep: #e2e4de; --raised: #ffffff; --raised-2: #e9ebe5;
    --line: #d3d8d1; --line-strong: #9aa59f;
    --text: #10201b; --text-2: #33433c; --text-3: #55645d;
    --link: #146e4f; --focus: #17805b; --rest: #d9ddd6;
  }
}

/* An explicit choice in the app's Appearance setting overrides the system. */
:root[data-theme="light"] {
  color-scheme: light;
  --grout: #f2f1ec; --grout-deep: #e2e4de; --raised: #ffffff; --raised-2: #e9ebe5;
  --line: #d3d8d1; --line-strong: #9aa59f;
  --text: #10201b; --text-2: #33433c; --text-3: #55645d;
  --link: #146e4f; --focus: #17805b; --rest: #d9ddd6;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grout: #10201b; --grout-deep: #0b1612; --raised: #182c25; --raised-2: #203630;
  --line: #2a4038; --line-strong: #4d6259;
  --text: var(--bone); --text-2: #cfd8d3; --text-3: #a7b5ae;
  --link: #7fc8b5; --focus: #7fc8b5; --rest: #1b2e28;
}
