/* =====================================================================
   werkzeuge/diagramm/eigen/colors.css
   ------------------------------------------------------------------
   Farbvariablen des LabDiagram fuer die eigene, mitgelieferte
   Farbquelle. Im laufenden lab kommen die Werte aus css/colors.css;
   damit der Werkzeugordner aber auch ohne die Plattform startet,
   steht hier derselbe Satz - nur die, die LabDiagram wirklich
   braucht (app.css + basis.css, nachgezaelt - keine weiteren).

   Wertewoerterbuch (hell / dunkel) wie in der Plattform:
     --bd-color    Seitenhintergrund      --ct-color    Panels
     --div-color   innere Flaeche          --blk-color   Text
     --bt-color    Button, Akzent          --link-color  Links
     --grey600-color Sekundaertext         --lab-border  1px-Linien

   Prinzip: Hell = Schulgruen, Dunkel = Orange-Akzent (AGENTS.md 5.1).
   Der Modus wird per JS auf <html data-theme="light|dark"> gesetzt
   (eigen/geraet.js); faellt JS aus, gilt der helle Modus.

   Pflege: Aendert sich ein Wert in lab/css/colors.css, muss er hier
   nachgezogen werden - sonst weicht LabDiagram im Verbund von der
   Fassung ohne lab ab.
   ===================================================================== */

:root {
  color-scheme: light;

  /* --- Flaechen --- */
  --bd-color:     #F4F6F5; /* Seitenhintergrund (kuehles Hellgrau) */
  --ct-color:     #FFFFFF; /* Panels, Karten */
  --div-color:    #FFFFFF; /* innere Flaechen */
  --blk-color:    #1A1C1A; /* Text (AAA auf Weiss) */

  /* --- Primaer / Buttons (Schul-Gruen) --- */
  --bt-color:     #2E7D32; /* Green 800 - gedeckt und ernst */
  --bt-h-color:   #1B5E20; /* Green 900 - Hover */
  --bt-f-color:   #FFFFFF;
  --link-color:   #2E7D32; /* 5.1:1 auf Weiss (WCAG AA) */
  --link-h-color: #1B5E20;

  /* --- Gruene Toene (nur die, die das Werkzeug braucht) --- */
  --green50-color:  #E8F5E9;
  --green100-color: #C8E6C9;

  /* --- Graustufen --- */
  --grey50-color:        #FAFAFA;
  --grey100-color:       #F5F5F5;
  --grey200-color:       #EEEEEE;
  --grey300-color:       #E0E0E0;
  --grey600-color:       #5F6763; /* Sekundaertext (4.9:1 auf Weiss) */
  --alt-div-color:       #F5F5F5;
  --alt-div-hover-color: #EEEEEE;

  /* --- lab-spezifisch --- */
  --lab-border-color: #E2E6E3;                 /* 1px-Linien */
  --lab-border:       1px solid var(--lab-border-color);
  --lab-ring:         rgba(46, 125, 50, 0.40); /* Fokusring */
  --lab-shadow-1:     0 1px 2px rgba(16, 24, 20, 0.06), 0 1px 3px rgba(16, 24, 20, 0.04);
  --lab-shadow-2:     0 10px 26px rgba(16, 24, 20, 0.10);
  --lab-toolbar-bg:   rgba(255, 255, 255, 0.86); /* klebrige Werkzeugleiste */

  /* Meldungen mit Fehlerbezug (z.B. unlesbare Datei) */
  --lab-fehler-fg:    #B3261E;

  /* Papier des Blattes und sein Raster: liegt auf weissem Grund und
     bleibt deshalb in beiden Modi gleich (Vorbild --lab-tv-blatt).
     Sonst waere die Zeichnung im Dunkelmodus auf dunklem Papier. */
  --lab-tv-blatt:           #FFFFFF;
  --lab-tv-blatt-text:      #1A1C1A;
  --lab-tv-blatt-linie:     #C4CBC7;
  --lab-tv-blatt-flaeche:   #F1F3F2;
  --lab-dg-raster-linie:    #DFE4E1;
  --lab-dg-raster-haupt:    #BCC5C1;

  /* Schriften */
  --lab-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lab-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* =====================================================================
   DUNKELMODUS - Akzent wird Orange, Flaechen werden Material Dark.
   Wird von eigen/geraet.js auf <html> gesetzt.
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  /* --- Flaechen --- */
  --bd-color:     #121413;
  --ct-color:     #1C1F1E;
  --div-color:    #232726;
  --blk-color:    #E7EAE8;

  /* --- Primaer / Buttons (Orange) --- */
  --bt-color:     #FF9800;
  --bt-h-color:   #FFB74D;
  --bt-f-color:   #14100A;
  --link-color:   #FFB74D; /* 10:1 auf dunklem Grund */
  --link-h-color: #FFCC80;

  /* --- Gruene Namen bleiben erhalten, werden aber warm gedeckt --- */
  --green50-color:  #2A2118;
  --green100-color: #34281A;

  /* --- Graustufen invertiert --- */
  --grey50-color:        #191C1B;
  --grey100-color:       #1C1F1E;
  --grey200-color:       #2A2E2D;
  --grey300-color:       #3A3F3E;
  --grey600-color:       #B4BBB8; /* Sekundaertext auf Dunkel */
  --alt-div-color:       #232726;
  --alt-div-hover-color: #2C3130;

  /* --- lab-spezifisch --- */
  --lab-border-color: #333938;
  --lab-ring:         rgba(255, 152, 0, 0.45);
  --lab-shadow-1:     0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --lab-shadow-2:     0 12px 30px rgba(0, 0, 0, 0.45);
  --lab-toolbar-bg:   rgba(18, 20, 19, 0.86);

  /* Meldungen mit Fehlerbezug (z.B. unlesbare Datei) */
  --lab-fehler-fg:    #F2B8B5;

  /* Papier und Raster bleiben weiss (Werte wie im Hellmodus, siehe
     oben) - das Blatt ist Papier, nicht Bildschirm. */
  --lab-tv-blatt:           #FFFFFF;
  --lab-tv-blatt-text:      #1A1C1A;
  --lab-tv-blatt-linie:     #C4CBC7;
  --lab-tv-blatt-flaeche:   #F1F3F2;
  --lab-dg-raster-linie:    #DFE4E1;
  --lab-dg-raster-haupt:    #BCC5C1;
}