/* ============================================================
   KODEON DIGITAL SOLUTIONS — zentrale Farb- und Design-Token
   ------------------------------------------------------------
   EINZIGE Quelle für Farben. Wer eine Farbe ändern will,
   ändert sie hier — nirgends sonst.

   Konzept (Weg B): warmes Papier + EIN Dunkel + EINE Markenfarbe.
   - Neutrale bleiben warm (das unterscheidet uns von jeder kühlen SaaS-Seite)
   - Es gibt genau EINE Dunkel-Familie (kein Braun-Schwarz mehr daneben)
   - Die Marke ist Indigo, in zwei funktionalen Tonwerten:
       --brand        → Text, Links, Flächen auf HELL   (AA-fest)
       --brand-bright → Grafik/Flächen, nur auf DUNKEL  (kein Fließtext!)
   Kontrast: alle Paare unten sind gegen WCAG AA geprüft.
   ============================================================ */

:root{
  /* ---------- Neutrale, warm ---------- */
  --paper:#0C111B;        /* Grundfläche hell */
  --paper-2:#141926;      /* Karten auf Papier */
  --paper-3:#1B2230;      /* Abgesetzte Zone */
  --sand:#EFE7D6;         /* Zweite Flächenebene */
  --line:#1E212C;
  --line-2:#2C313E;

  /* ---------- Tinte ---------- */
  --ink:#F5F3EC;          /* 16.3:1 auf Papier */
  --ink-2:#C6C3B8;
  --muted:#6E6353;        /*  5.3:1 auf Papier */
  --faint:#9A8F7C;        /* nur Deko/Große Schrift */

  /* ---------- EINE Dunkel-Familie (entwärmtes Anthrazit-Navy) ---------- */
  --dark-1:#101119;       /* tiefste Fläche: Hero, Footer */
  --dark-2:#171825;       /* dunkle Sektionen/Panels */
  --dark-3:#212336;       /* Karten auf Dunkel */
  --dark-line:#2B2D40;
  --on-dark:#EEEFF7;      /* 16.4:1 auf --dark-1 */
  --on-dark-2:#A3A6C4;    /*  7.4:1 auf --dark-2 */

  /* ---------- Marke: Champagnergrün (identisch zur Startseite) ---------- */
  --brand:#7FA891;        /* Links auf dunkel — derselbe Ton wie --blau vorne */
  --brand-ink:#9AC0A8;    /* Hover: eine Stufe heller                        */
  --brand-bright:#9AC0A8;
  --brand-light:#9AC0A8;
  --brand-soft:rgba(127,168,145,.16);
  --brand-glow:rgba(127,168,145,.22);
  --brand-grad:linear-gradient(120deg,#9AC0A8 0%,#7FA891 100%);
  --brand-grad-hover:linear-gradient(120deg,#A8CBB5 0%,#8CB39C 100%);
  --on-brand:#0C111B;     /* Label auf Markenfläche */

  /* ---------- Funktionale Statusfarben (Bedeutung, NICHT Marke) ---------- */
  /* bewusst gedämpft, damit sie neben Indigo nicht als zweite Marke gelesen werden */
  --ok:#0F7A55;   --ok-soft:#E4F2EB;
  --warn:#E7B968; --warn-soft:#241C0E;

  /* ---------- Fyno: eigene Ebene, aktuell auf die Marke gemappt ----------
     Fyno soll später eine eigenständige Marke werden können. Dafür müssen
     NUR diese vier Werte geändert werden — sonst nichts im Projekt.        */
  --fy-dark:var(--dark-2);
  --fy-accent:var(--brand);
  --fy-accent-light:var(--brand-light);
  --fy-accent-soft:var(--brand-soft);

  /* ---------- Fremd-Marken (nie einfärben!) ----------
     WhatsApp-Screenshot im Gerät: zeigt eine echte fremde App.
     Diese Werte bleiben original, damit der Chat als Beweis lesbar ist. */
  --wa-bg:#0B141A; --wa-head:#1F2C33; --wa-in:#1F2C33;
  --wa-out:#005C4B; --wa-text:#E9EDEF; --wa-meta:#8696A0;
  --wa-brand:#25D366; --wa-send:#00A884; --wa-check:#53BDEB;

  /* ---------- Schatten / Maße / Schrift ---------- */
  --shadow-1:0 1px 2px rgba(16,17,25,.05),0 14px 34px -20px rgba(16,17,25,.25);
  --shadow-2:0 2px 4px rgba(16,17,25,.06),0 30px 60px -30px rgba(16,17,25,.38);
  --radius:10px;
  --wrap:1180px;
  --maxw:1140px;
  --f-head:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --f-body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'Instrument Sans',-apple-system,sans-serif;

  /* ============================================================
     ALTNAMEN — zeigen auf die Token oben.
     Nur damit bestehendes CSS weiterläuft. Bei neuem CSS
     bitte immer die semantischen Namen oben verwenden.
     ============================================================ */
  --accent:var(--brand);
  --accent-2:var(--brand-ink);
  --accent-soft:var(--brand-soft);
  --warm:var(--brand);
  --warm-ink:var(--brand-ink);
  --warm-soft:var(--brand-soft);
  --warm-glow:var(--brand-light);
  --indigo:var(--brand-bright);
  --indigo-2:var(--brand-light);
  --navy:var(--dark-1);
  --navy-2:var(--dark-2);
  --dark:var(--dark-2);
}