/* ════════════════════════════════════════════════════════════
   Die Gestaltungswerte des internen Bereichs – EINE Quelle.

   Dieselben Namen wie im Design System „JL RealEstate Intern“
   (Claude Design, Vorlage in design-system/). Die Werkzeuge lesen sie
   als var(--name); feste Farben im Code gibt es nicht.

   Nach jeder Änderung hier: node design-system/abgleich.js --schreiben
   – das trägt die Werte in design-system/tokens.json nach.

   DUNKEL: Nur Seiten, die schon umgestellt sind, tragen am <html>
   das Attribut data-dunkel (siehe render_header in lib/_layout.php).
   Sein Wert ist die Wahl im Nutzermenü:
     system  folgt der Einstellung des Geräts
     hell    immer hell
     dunkel  immer dunkel
   Alle anderen Seiten bleiben hell, auch wenn Dunkel gewählt ist –
   lieber eine helle Seite als eine halb dunkle.

   Kontraste (geprüft): ink, muted, gut, warn, schlecht ≥ 4,5:1 auf
   surface und ground in BEIDEN Themen. accent als Text nur dunkel
   (7:1); hell nur für Linien, Flächen und Zahlen ab 24px (2,4:1).
   ════════════════════════════════════════════════════════════ */

:root {
  --navy: #0c1826;
  --navy-2: #13243a;
  --navy-text: #0c1826;                   /* Navy als Schrift (große Zahlen); dunkel hell */
  --accent: #1abbb4;
  --accent-text: #0c7d77;                 /* Türkis als Text auf hellem Grund (5,1:1) */
  --on-accent: #0c1826;                   /* Schrift auf accent-Flächen (Marke „neu“), 8:1 */
  --ink: #0f2b2e;
  --muted: #5a6b6c;
  --ground: #f4f6f7;
  --surface: #ffffff;
  --border: #e2e8e9;
  --grid: #e6ecec;
  --track: #eef2f3;
  --ring-track: #eaf0f0;
  --track-2: #dbe3e4;                     /* leerer Teil eines Anteilsbalkens */
  --brach: #e2cdbe;                       /* nicht realisierte Miete */
  --potenzial: #8a6424;                   /* SOLL-Werte (Co-Investor-Broschüre), immer mit „→“ und „SOLL“ – 5,4:1 auf surface */
  --treffer: #c6eeec;                     /* Markierung des Suchworts (Ankauf), Schrift bleibt ink */
  --prio-2: #c28a00;                      /* Priorität P2 (Ankauf): Marke mit Schrift navy, Kartenrahmen – P1 nutzt schlecht */
  --prio-3: #2f6fb0;                      /* Priorität P3 (Ankauf): Marke mit Schrift surface, Kartenrahmen */
  --platzhalter: #f6e4c8;                 /* Grund hinter [Platzhaltern] in Wiki-Vorlagen, Schrift bleibt ink */
  --serie: #0c1826;                       /* Datenreihe „Grundmenge“ (Einstand, getilgt) */
  --stand-geplant: #13243a;               /* Stand „geplant“ (Kostenplaner, Dashboard) – hell wie navy-2, dunkel heller */
  --gut: #2f6b4f;
  --gut-tint: #f3faf6;
  --warn: #b25a2b;
  --warn-tint: #fdf6f3;
  --schlecht: #9e3b2e;
  --on-navy: #ffffff;
  --schleier: rgba(12, 24, 38, .5);       /* hinter Dialogen */
  --hauch: rgba(12, 24, 38, .05);         /* Kopfzeilen, Marken */

  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --space-6: 6px; --space-8: 8px; --space-12: 12px; --space-14: 14px;
  --space-16: 16px; --space-18: 18px; --space-26: 26px;
  --radius-6: 6px; --radius-8: 8px; --radius-12: 12px; --radius-14: 14px;
  --schatten-karte: 0 6px 20px rgba(12, 24, 38, .07);

  /* Alte Namen aus _layout.php, damit nichts bricht */
  --navy2: var(--navy-2);
  --bg: var(--ground);
  --line: rgba(255, 255, 255, .12);

  color-scheme: light;
}

/* Dunkel – zweimal derselbe Satz: einmal für „System“, wenn das
   Gerät dunkel ist, einmal für „Dunkel“ fest. */
@media (prefers-color-scheme: dark) {
  html[data-dunkel="system"] {
    --navy: #1d3049;
    --navy-2: #27405f;
    --navy-text: #e4ecee;
    --accent: #1abbb4;
    --accent-text: #1abbb4;
    --on-accent: #0c1826;
    --ink: #e4ecee;
    --muted: #8fa1a4;
    --ground: #0a131c;
    --surface: #111c28;
    --border: #243446;
    --grid: #1f2c3b;
    --track: #1b2836;
    --ring-track: #1d2a39;
    --track-2: #2a3a4d;
    --brach: #6b4e3c;
    --potenzial: #d9b878;
    --treffer: #144c52;
    --prio-2: #e0b23a;
    --prio-3: #6fa3dc;
    --platzhalter: #4a3519;
    --serie: #5b7ea6;
    --stand-geplant: #5b7ea6;
    --gut: #6cc49a;
    --gut-tint: #12281f;
    --warn: #e39a6b;
    --warn-tint: #2a1d16;
    --schlecht: #ef7f6f;
    --on-navy: #ffffff;
    --schleier: rgba(0, 0, 0, .6);
    --hauch: rgba(255, 255, 255, .05);
    --schatten-karte: 0 6px 20px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
html[data-dunkel="dunkel"] {
  --navy: #1d3049;
  --navy-2: #27405f;
  --navy-text: #e4ecee;
  --accent: #1abbb4;
  --accent-text: #1abbb4;
  --on-accent: #0c1826;
  --ink: #e4ecee;
  --muted: #8fa1a4;
  --ground: #0a131c;
  --surface: #111c28;
  --border: #243446;
  --grid: #1f2c3b;
  --track: #1b2836;
  --ring-track: #1d2a39;
  --track-2: #2a3a4d;
  --brach: #6b4e3c;
  --potenzial: #d9b878;
  --treffer: #144c52;
  --prio-2: #e0b23a;
  --prio-3: #6fa3dc;
  --platzhalter: #4a3519;
  --serie: #5b7ea6;
  --stand-geplant: #5b7ea6;
  --gut: #6cc49a;
  --gut-tint: #12281f;
  --warn: #e39a6b;
  --warn-tint: #2a1d16;
  --schlecht: #ef7f6f;
  --on-navy: #ffffff;
  --schleier: rgba(0, 0, 0, .6);
  --hauch: rgba(255, 255, 255, .05);
  --schatten-karte: 0 6px 20px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* Gedruckt wird immer hell */
@media print {
  html[data-dunkel] {
    --navy: #0c1826; --navy-2: #13243a; --navy-text: #0c1826; --accent-text: #0c7d77; --on-accent: #0c1826; --ink: #0f2b2e; --muted: #5a6b6c;
    --ground: #ffffff; --surface: #ffffff; --border: #e2e8e9; --grid: #e6ecec;
    --track: #eef2f3; --ring-track: #eaf0f0; --track-2: #dbe3e4; --brach: #e2cdbe; --potenzial: #8a6424; --treffer: #c6eeec; --prio-2: #c28a00; --prio-3: #2f6fb0; --platzhalter: #f6e4c8; --serie: #0c1826; --stand-geplant: #13243a; --gut: #2f6b4f; --gut-tint: #f3faf6;
    --warn: #b25a2b; --warn-tint: #fdf6f3; --schlecht: #9e3b2e; --hauch: rgba(12, 24, 38, .05);
    color-scheme: light;
  }
}