@layer tokens{
  :root{
    /* Main (Brand) */
    --primary:#6d8e63;
    --primary-dark:#5c7c53;

    /* UI states */
    --success:#2f7d4a;
    --warning:#b07a2a;
    --danger:#b44a4a;
    --info:#2b6f86;

    /* Accents */
    --accent:#6b7280;
    --accent-2:#7a6b5a;
    --link:#2f5f86;
    --focus:rgba(109,142,99,.30);

    /* Charts */
    --chart-1:#6d8e63;
    --chart-2:#3f6f8f;
    --chart-3:#8a6a3a;
    --chart-4:#8a4a4a;
    --chart-5:#5f5a7a;
    --chart-6:#2f7a6f;
    --chart-7:#6f5a5f;
    --chart-8:#64748b;
    --chart-9:#4b5563;
    --chart-10:#94a3b8;

    /* Typography */
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Radius / spacing */
    --r-sm:.5rem;
    --r-md:.75rem;
    --r-lg:.9rem;

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
    --space-8:2rem;

    /* Layout */
    --container-max:1200px;
    --page-x:clamp(16px,4vw,40px);
    --container-x:clamp(32px,8vw,80px);

    /* Shadows */
    --shadow-1:0 1px 3px var(--shadow);
    --shadow-2:0 12px 30px color-mix(in srgb, var(--shadow) 70%, transparent);

    /* Helpers */
    --primary-soft:rgba(109,142,99,.10);

    /* Theme toggle tokens */
    --toggle-track:#ebebeb;
    --toggle-track-checked:#242424;
    --toggle-knob:linear-gradient(180deg,#ffcc89,#d8860b);
    --toggle-knob-checked:linear-gradient(180deg,#777,#3a3a3a);
    --toggle-sun:#ffffff;
    --toggle-moon:#7e7e7e;
    --toggle-sun-checked:#7e7e7e;
    --toggle-moon-checked:#ffffff;

    /*Schrift*/
      --text-primary: var(--text);
      --text-secondary: var(--text-muted);
      --surface: var(--card);
      --bg-light: var(--card);
      --bar-green-light: var(--primary-soft);
      --surface-hover: color-mix(in srgb, var(--card) 92%, var(--primary-soft));
  }
}