@layer tokens{
  /* Light mode */
  html[data-theme="light"]{
    --bg:#ffffff;
    --card:#ffffff;
    --text:#0f172a;
    --text-muted:#6b7280;

    --border:#e2e8f0;
    --shadow:rgba(15,23,42,.08);

    --gridline:rgba(15,23,42,.10);
    --chart-tooltip-bg:#ffffff;

    --primary-soft:rgba(109,142,99,.10);
  }

  /* Dark mode */
  html[data-theme="dark"]{
    --bg:#0f1115;
    --card:#0f1115;
    --text:#e5e7eb;
    --text-muted:#9aa4b2;

    --border:#1f2937;
    --shadow:rgba(0,0,0,.35);

    --gridline:rgba(148,163,184,.18);
    --chart-tooltip-bg:#0b1220;

    --primary-soft:rgba(109,142,99,.18);
  }

  /* Optional: Auto-dark wenn kein data-theme gesetzt ist */
  @media (prefers-color-scheme: dark){
    html:not([data-theme]){
      --bg:#0f1115;
      --card:#111827;
      --text:#e5e7eb;
      --text-muted:#9aa4b2;
      --border:#1f2937;
      --shadow:rgba(0,0,0,.35);
      --gridline:rgba(148,163,184,.18);
      --chart-tooltip-bg:#0b1220;
      --primary-soft:rgba(109,142,99,.18);
    }
  }
}