/* /assets/css/tokens.css */
:root{
  /* Primär (Mint) */
  --aqua:#00E4D3;
  --aqua-deep:#009E8E;

  /* Basistöne */
  --bg:#0b0e14;      /* war Index */
  --bg-2:#0b141a;    /* Verlauf 2. Ton */
  --card:#0f141d;    /* war Index */
  --card-2:#101319;  /* zweite Kartenfläche */
  --text:#e9eef7;    /* Haupt-Text */
  --muted:#9aa4b2;
  --border:rgba(255,255,255,.08);
  --glass: rgba(15,20,29,.7);
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Akzente (einheitlich) */
  --accent:  #42c6d9;  /* Index akzent */
  --accent2: #2fe3c8;  /* Index akzent2 */
  /* Aliasse für ältere Stellen */
  --accent-2: var(--aqua-deep);
  --accent-3: var(--aqua-deep);

  /* Kompatibilitäts-Aliasse (damit alter Code weiterhin passt) */
  --fg:    var(--text);    /* Index nutzte --fg */
  --panel: var(--card);    /* Training nutzte --panel */
  --panel-2: var(--card-2);
  --ok:#1ec28b; --warn:#ffb020; --bad:#ff7a7a;
}

/* optionale gemeinsame Hintergründe */
.bg-app {
  background:
    radial-gradient(1200px 800px at 50% -200px, rgba(66,198,217,.15), transparent 60%),
    var(--bg);
  color: var(--text);
}
.bg-app-alt {
  background:
    radial-gradient(1200px 450px at 50% -120px, color-mix(in oklab, var(--accent2) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
}