/* ============================================================
   P&J Investicon — Farb-Tokens
   Palette 1:1 aus der Website-Vorlage. Grün-weiss, mit Schwarz für
   Tiefe und einer Feuer-Akzentfamilie (nur für „Ist-Zustand"/Warnungen).
   Ändere die vier Kanal-Variablen (*-rgb) = ganze Fläche färbt um.
   ============================================================ */
:root{
  /* ---- Marken-Grün ---- */
  --green:#25471A;         /* Primär · Buttonfüllung · Marke */
  --green-600:#3A662C;     /* Akzent auf Hell · Hover */
  --green-500:#26720E;     /* satteres Grün · Verläufe */
  --green-bright:#79EA55;  /* Signal-Akzent auf Dunkel */
  --green-200:#C3F1B4;     /* helle Fläche · Fliesstext auf Dunkel */
  --green-50:#F7FAF5;      /* zarteste grüne Tönung */

  /* ---- Schwarz / Neutral ---- */
  --ink:#000000;           /* Text · dunkle Sektionen (reines Schwarz) */
  --ink-2:#0A0A0A;         /* minimal abgesetzt, damit Karten sich lösen */
  --white:#FFFFFF;
  --paper:#F7F7F7;         /* Seitenhintergrund */
  --mist:#F2F2F2;          /* gesenkte Fläche */
  --line-100:#D8D8D8;      /* Trennlinie kräftig */
  --grey-400:#B2B2B2;      /* deaktiviert · Platzhalter */
  --grey-500:#7F7F7F;      /* zarter Nebentext */
  --grey-700:#4C4C4C;      /* Nebentext · Beschriftung */

  /* ---- Feuer-Akzente (nur „Ist-Zustand", Warnung, Fehler) ---- */
  --ember:#E0533A;         /* Warnmarke · Symptom */
  --ember-600:#C23B3B;     /* Fehlertext */
  --flame:#FF6B2C;         /* Glut · Verlauf */
  --amber:#FFB020;         /* Übergang Feuer→Grün */
  --flame-200:#FF9D4D;     /* Hero-Glut-Highlight */

  /* ---- Kanalwerte (für rgba-Mischungen) ---- */
  --green-rgb:37,71,26;              /* @kind other */
  --green-bright-rgb:121,234,85;     /* @kind other */
  --green-600-rgb:58,102,44;         /* @kind other */
  --ink-rgb:0,0,0;                   /* @kind other */
  --ember-rgb:224,83,58;             /* @kind other */

  /* ============ Semantische Aliase ============ */
  --brand:var(--green);
  --brand-hover:var(--green-600);
  --accent-on-dark:var(--green-bright);
  --accent-on-light:var(--green-600);

  --text:var(--ink);
  --text-muted:var(--grey-700);
  --text-faint:var(--grey-500);
  --text-on-brand:#FFFFFF;
  --text-on-dark:var(--green-200);

  --surface:var(--white);
  --surface-page:var(--paper);
  --surface-sunken:var(--mist);
  --surface-dark:var(--ink);
  --surface-tint:rgba(37,71,26,.06);   /* zarter grüner Kartenton */

  --border:rgba(0,0,0,.10);
  --border-strong:var(--line-100);
  --border-brand:rgba(37,71,26,.28);

  --danger:var(--ember-600);
  --danger-surface:rgba(224,83,58,.09);
  --warn:var(--ember);

  --focus-ring:var(--green-600);

  /* ============ Kompatibilität mit der Website-Vorlage ============
     Die Original-Tokens (deutsche Namen) bleiben als Aliase erhalten,
     damit die bestehende „Website Vorlage.html" unverändert läuft. */
  --tief:var(--ink); --tief-2:var(--ink-2); --tinte:var(--ink);
  --signal:var(--green); --signal-tief:var(--green-600); --kai:var(--green-500);
  --horizont:var(--green-bright); --weiss:var(--white);
  --dunst:var(--mist); --dunst-2:var(--paper);
  --grau:var(--grey-700); --grau-hell:var(--grey-400);
  --signal-rgb:var(--green-rgb); --horizont-rgb:var(--green-bright-rgb);
  --tinte-rgb:var(--ink-rgb); --tief-rgb:var(--ink-rgb);
  --akzent:var(--green-600); --akzent-rgb:var(--green-600-rgb);
}