/* ============================================================
   BewerbungsManager — Color tokens
   ------------------------------------------------------------
   Dunkles Progress-Dashboard-System mit ZWEI Themes:
     :root                       -> Dunkel (Standard!)
     [data-theme="light"]        -> Hell (explizit)
     prefers-color-scheme: light -> Hell (wenn kein Attribut)
   Umschalten: document.documentElement.dataset.theme =
   "light" | "dark" (oder Attribut entfernen = System).
   LOCK: EIN Leitakzent (Emerald Green), Amber als warmer
   Support fuer Daten-Highlights, tiefe blau-schwarze Flaechen.
   ============================================================ */

:root {
  /* ---- Marken-Referenz ---- */
  --bm-teal:       #2794b0;
  --bm-green:      #80c074;
  --bm-green-deep: #5a9e4e;

  color-scheme: dark;

  /* Flaechen — tiefes Blau-Schwarz -> Karten eine Stufe heller */
  --bg:   #0d1319;
  --bg-1: #151c24;
  --bg-2: #1a222b;
  --bg-3: #222c36;

  /* Hairlines */
  --line:   rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.14);

  /* Text-Rampe */
  --tx:   #f2f5f7;
  --tx-2: #a6b1bb;
  --tx-3: #6a7683;

  /* Akzent (einer, Emerald Green) */
  --ac:     #5a9e4e;
  --ac-2:   #80c074;
  --ac-dim: rgba(90, 158, 78, 0.14);
  --ac-line:rgba(90, 158, 78, 0.40);
  --ac-grad: linear-gradient(135deg, #80c074 0%, #5a9e4e 100%); /* @kind other */

  /* Kategorie-Akzente — kontrollierte Mehrfarbigkeit fuer Icon-Kacheln,
     KPI-Tiles und Donut-Serien. Sparsam; Gruen bleibt der Leitakzent. */
  --c-emerald: #7fbf74;
  --c-amber:   #f0a53e;
  --c-violet:  #8f7bff;
  --c-blue:    #1fa3bc;

  /* Status */
  --ok:  #0eb567;
  --bad: #f0565b;

  /* Kontrast-Linie / "Ink" (Charts, Emphasis) */
  --ink: #e9eef2;

  /* ---- Support: Amber (warmes Signal) ----
     Sekundaerfamilie: Daten-Highlights, Datumsspalten, zweite Serie. */
  --amber:      #f0a53e;
  --amber-2:    #f7bd6b;
  --amber-dim:  rgba(240, 165, 62, 0.14);
  --amber-line: rgba(240, 165, 62, 0.38);

  /* ---- Support: Slate (kuehles Grau-Blau) ----
     Datenreihen, Info-Signale, stille Trenner. */
  --slate:      #8b99ad;
  --slate-2:    #aab6c6;
  --slate-soft: #5c6a7e;
  --slate-dim:  rgba(139, 153, 173, 0.14);
  --slate-line: rgba(139, 153, 173, 0.32);

  /* Chart-Serien (gruen gefuehrt, warm akzentuiert) */
  --ch-1: #5a9e4e;
  --ch-2: #7fbf74;
  --ch-3: #f0a53e;
  --ch-4: #8f7bff;
  --ch-5: #8b99ad;
  --ch-6: #e9eef2;

  /* Primaerbutton */
  --btn-pf-bg:   #5a9e4e;
  --btn-pf-tx:   #ffffff;
  --btn-pf-bg-h: #74b868;

  /* Atmosphaere — nuechtern, kein Glow */
  --grid-line: rgba(128, 192, 116, 0.05);
  --aura: none; /* @kind other */
  --grain-display: none; /* @kind other */

  --sel-bg: #5a9e4e;
  --sel-tx: #ffffff;

  /* Elevation — weich, tief, niedrige Opazitaet */
  --shadow-card: 0 16px 40px -20px rgba(0, 0, 0, 0.6); /* @kind other */
  --shadow-cut:  0 24px 48px -16px rgba(0, 0, 0, 0.7); /* @kind other */
  --shadow-pop:  0 12px 32px -14px rgba(0, 0, 0, 0.65); /* @kind other */
}

/* ---------- Helles Theme (System-Einstellung, kein Attribut) ---------- */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg:   #eef1f4;
    --bg-1: #ffffff;
    --bg-2: #f5f8fa;
    --bg-3: #e2e8ec;

    --line:   rgba(13, 25, 32, 0.08);
    --line-2: rgba(13, 25, 32, 0.16);

    --tx:   #101b21;
    --tx-2: #4b5a64;
    --tx-3: #8b98a2;

    --ac:     #4c8a42;
    --ac-2:   #3d7a35;
    --ac-dim: rgba(76, 138, 66, 0.12);
    --ac-line:rgba(76, 138, 66, 0.35);
    --ac-grad: linear-gradient(135deg, #5a9e4e 0%, #3d7a35 100%); /* @kind other */

    --c-emerald: #5a9e4e;
    --c-amber:   #d47313;
    --c-violet:  #7c5cff;
    --c-blue:    #17809a;

    --ok:  #2e9e5b;
    --bad: #e5484d;
    --ink: #101b21;

    --amber:      #d47313;
    --amber-2:    #9c5410;
    --amber-dim:  rgba(212, 115, 19, 0.12);
    --amber-line: rgba(212, 115, 19, 0.35);

    --slate:      #64748b;
    --slate-2:    #475569;
    --slate-soft: #94a3b8;
    --slate-dim:  rgba(100, 116, 139, 0.12);
    --slate-line: rgba(71, 85, 105, 0.30);

    --ch-1: #4c8a42;
    --ch-2: #5a9e4e;
    --ch-3: #d47313;
    --ch-4: #7c5cff;
    --ch-5: #64748b;
    --ch-6: #101b21;

    --btn-pf-bg:   #4c8a42;
    --btn-pf-tx:   #ffffff;
    --btn-pf-bg-h: #3d7a35;

    --grid-line: rgba(76, 138, 66, 0.06);

    --sel-bg: #4c8a42;
    --sel-tx: #ffffff;

    --shadow-card: 0 16px 40px -20px rgba(13, 25, 32, 0.18);
    --shadow-cut:  0 24px 48px -16px rgba(13, 25, 32, 0.28);
    --shadow-pop:  0 12px 32px -14px rgba(13, 25, 32, 0.24);
  }
}

/* ---------- Dunkles Theme (explizit) — gewinnt gegen die Media-Query ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:   #0d1319;
  --bg-1: #151c24;
  --bg-2: #1a222b;
  --bg-3: #222c36;

  --line:   rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.14);

  --tx:   #f2f5f7;
  --tx-2: #a6b1bb;
  --tx-3: #6a7683;

  --ac:     #5a9e4e;
  --ac-2:   #80c074;
  --ac-dim: rgba(90, 158, 78, 0.14);
  --ac-line:rgba(90, 158, 78, 0.40);
  --ac-grad: linear-gradient(135deg, #80c074 0%, #5a9e4e 100%); /* @kind other */

  --c-emerald: #7fbf74;
  --c-amber:   #f0a53e;
  --c-violet:  #8f7bff;
  --c-blue:    #1fa3bc;

  --ok:  #0eb567;
  --bad: #f0565b;
  --ink: #e9eef2;

  --amber:      #f0a53e;
  --amber-2:    #f7bd6b;
  --amber-dim:  rgba(240, 165, 62, 0.14);
  --amber-line: rgba(240, 165, 62, 0.38);

  --slate:      #8b99ad;
  --slate-2:    #aab6c6;
  --slate-soft: #5c6a7e;
  --slate-dim:  rgba(139, 153, 173, 0.14);
  --slate-line: rgba(139, 153, 173, 0.32);

  --ch-1: #5a9e4e;
  --ch-2: #7fbf74;
  --ch-3: #f0a53e;
  --ch-4: #8f7bff;
  --ch-5: #8b99ad;
  --ch-6: #e9eef2;

  --btn-pf-bg:   #5a9e4e;
  --btn-pf-tx:   #ffffff;
  --btn-pf-bg-h: #74b868;

  --grid-line: rgba(128, 192, 116, 0.05);

  --sel-bg: #5a9e4e;
  --sel-tx: #ffffff;

  --shadow-card: 0 16px 40px -20px rgba(0, 0, 0, 0.6);
  --shadow-cut:  0 24px 48px -16px rgba(0, 0, 0, 0.7);
  --shadow-pop:  0 12px 32px -14px rgba(0, 0, 0, 0.65);
}

/* ---------- Helles Theme (explizit) ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg:   #eef1f4;
  --bg-1: #ffffff;
  --bg-2: #f5f8fa;
  --bg-3: #e2e8ec;

  --line:   rgba(13, 25, 32, 0.08);
  --line-2: rgba(13, 25, 32, 0.16);

  --tx:   #101b21;
  --tx-2: #4b5a64;
  --tx-3: #8b98a2;

  --ac:     #4c8a42;
  --ac-2:   #3d7a35;
  --ac-dim: rgba(76, 138, 66, 0.12);
  --ac-line:rgba(76, 138, 66, 0.35);
    --ac-grad: linear-gradient(135deg, #5a9e4e 0%, #3d7a35 100%); /* @kind other */

  --c-emerald: #5a9e4e;
  --c-amber:   #d47313;
  --c-violet:  #7c5cff;
  --c-blue:    #17809a;

  --ok:  #2e9e5b;
  --bad: #e5484d;
  --ink: #101b21;

  --amber:      #d47313;
  --amber-2:    #9c5410;
  --amber-dim:  rgba(212, 115, 19, 0.12);
  --amber-line: rgba(212, 115, 19, 0.35);

  --slate:      #64748b;
  --slate-2:    #475569;
  --slate-soft: #94a3b8;
  --slate-dim:  rgba(100, 116, 139, 0.12);
  --slate-line: rgba(71, 85, 105, 0.30);

  --ch-1: #4c8a42;
  --ch-2: #5a9e4e;
  --ch-3: #d47313;
  --ch-4: #7c5cff;
  --ch-5: #64748b;
  --ch-6: #101b21;

  --btn-pf-bg:   #4c8a42;
  --btn-pf-tx:   #ffffff;
  --btn-pf-bg-h: #3d7a35;

  --grid-line: rgba(76, 138, 66, 0.06);

  --sel-bg: #4c8a42;
  --sel-tx: #ffffff;

  --shadow-card: 0 16px 40px -20px rgba(13, 25, 32, 0.18);
  --shadow-cut:  0 24px 48px -16px rgba(13, 25, 32, 0.28);
  --shadow-pop:  0 12px 32px -14px rgba(13, 25, 32, 0.24);
}