/* Theme "Standaard": calm, light with a dark variant, one colour per kind of training.
   Every theme defines the same tokens; app.css uses only these. */

:root {
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --radius-card: 20px;
  --radius-control: 12px;

  --bg: #F6F5F2;
  --card: #FFFFFF;
  --text: #17171A;
  --muted: #5F5E66;
  --border: #E6E4DF;
  --track: #ECEAE5;
  --primary: #17171A;
  --on-primary: #FFFFFF;
  --ok-bg: #EAF3DE;  --ok-text: #27500A;
  --warn-bg: #FAEEDA; --warn-text: #633806;
  --high: #D85A30;   --good: #1D9E75;

  /* One colour family per kind: background, text, secondary text, dot. */
  --kracht-bg: #EEEDFE;   --kracht-text: #26215C;   --kracht-sub: #534AB7;   --kracht-dot: #7F77DD;
  --roeien-bg: #E1F5EE;   --roeien-text: #04342C;   --roeien-sub: #0F6E56;   --roeien-dot: #1D9E75;
  --lopen-bg: #FAECE7;    --lopen-text: #4A1B0C;    --lopen-sub: #993C1D;    --lopen-dot: #D85A30;
  --wandelen-bg: #FAEEDA; --wandelen-text: #412402; --wandelen-sub: #854F0B; --wandelen-dot: #EF9F27;
  --doel-bg: #FAECE7;     --doel-text: #4A1B0C;     --doel-sub: #993C1D;     --doel-dot: #D85A30;
  --anders-bg: #F1EFE8;   --anders-text: #2C2C2A;   --anders-sub: #5F5E5A;   --anders-dot: #888780;
}

:root[data-mode="dark"] {
  --bg: #121214;
  --card: #1C1C20;
  --text: #F3F2EE;
  --muted: #ABAAB2;
  --border: #2E2E35;
  --track: #2E2E35;
  --primary: #F3F2EE;
  --on-primary: #121214;
  --ok-bg: #173404;  --ok-text: #C0DD97;
  --warn-bg: #412402; --warn-text: #FAC775;
  --kracht-bg: #26215C;   --kracht-text: #CECBF6;   --kracht-sub: #AFA9EC;
  --roeien-bg: #04342C;   --roeien-text: #9FE1CB;   --roeien-sub: #5DCAA5;
  --lopen-bg: #4A1B0C;    --lopen-text: #F5C4B3;    --lopen-sub: #F0997B;
  --wandelen-bg: #412402; --wandelen-text: #FAC775; --wandelen-sub: #EF9F27;
  --doel-bg: #4A1B0C;     --doel-text: #F5C4B3;     --doel-sub: #F0997B;
  --anders-bg: #2C2C2A;   --anders-text: #F1EFE8;   --anders-sub: #B4B2A9;
}

@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] {
    --bg: #121214;
    --card: #1C1C20;
    --text: #F3F2EE;
    --muted: #ABAAB2;
    --border: #2E2E35;
    --track: #2E2E35;
    --primary: #F3F2EE;
    --on-primary: #121214;
    --ok-bg: #173404;  --ok-text: #C0DD97;
    --warn-bg: #412402; --warn-text: #FAC775;
    --kracht-bg: #26215C;   --kracht-text: #CECBF6;   --kracht-sub: #AFA9EC;
    --roeien-bg: #04342C;   --roeien-text: #9FE1CB;   --roeien-sub: #5DCAA5;
    --lopen-bg: #4A1B0C;    --lopen-text: #F5C4B3;    --lopen-sub: #F0997B;
    --wandelen-bg: #412402; --wandelen-text: #FAC775; --wandelen-sub: #EF9F27;
    --doel-bg: #4A1B0C;     --doel-text: #F5C4B3;     --doel-sub: #F0997B;
    --anders-bg: #2C2C2A;   --anders-text: #F1EFE8;   --anders-sub: #B4B2A9;
  }
}