/* ============================================================
   E1 ProServ — Color tokens

   GRUNDWELT: dunkelblau → petrol. Petrol ist eigenständig
   (die ProServ-Farbe); E1-Blau #006699 erscheint nur noch beim
   Bezug auf die E1-Unternehmensgruppe.

   THEMES
     • Light = warmes Papyrus/Sand (bleibt) mit Petrol-Typo/Akzenten
     • Dark  = Petrol (ersetzt das frühere Graphit)

   AKZENT: über [data-accent="turkis|gruen|mint"] umschaltbar.
   Default = gruen (Energiegrün) — bester Kontrast auf Petrol UND Sand.
   ============================================================ */
:root {
  /* --- Petrol-Skala: die Grundwelt --- */
  --petrol-950: #05191f;
  --petrol-900: #072430;
  --petrol-800: #0b303d;
  --petrol-700: #103d4c;
  --petrol-600: #164e5f;
  --petrol-500: #1c6373;   /* Basis-Petrol */
  --petrol-400: #2f8496;
  --petrol-300: #6aa9b6;
  --petrol-200: #a8ccd4;
  --petrol-100: #d5e6ea;
  --petrol-050: #eaf3f5;

  /* --- E1-Gruppenbezug (nur dort verwenden) --- */
  --e1-blue:     #006699;
  --e1-blue-600: #00567f;
  --e1-blue-700: #004666;
  --e1-blue-050: #e7eef2;

  /* --- Akzent-Varianten ---

     Die `-strong`-Schwester ist die für Schrift auf hellem Grund. Sie war
     dafür zu hell: #12939d auf der Seitenfläche ergibt 3,25:1, verlangt
     sind 4,5:1 — aufgefallen an der Zeile „Für Sie heißt das“ in den
     Leistungskarten, zwölf Pixel klein.

     Die Werte sind so weit abgedunkelt, dass sie auf der hellsten Fläche
     mit Reserve bestehen. Der helle Zwilling darüber bleibt unverändert —
     er trägt Flächen, Linien und Aktivzustände, nicht Text. */
  --acc-turkis:        #19b8c4;
  --acc-turkis-strong: #0c717a;
  --acc-gruen:         #57b877;   /* Energiegrün */
  --acc-gruen-strong:  #2c7644;
  --acc-mint:          #2bb59b;   /* Petrol-Mint (Zwischenweg) */
  --acc-mint-strong:   #16705f;

  /* --- Warme Neutrale (Sand / Papyrus) --- */
  --sand-050: #fcfaf6;
  --sand-100: #f4f0e8;
  --sand-200: #eae3d6;
  --sand-300: #dad0bf;
  --sand-400: #c4b79e;
  /* Auf --surface-subtle (#eae3d6) ergab #6e6658 genau 4,44:1 — sechs
     Hundertstel unter der Grenze. Ein Hauch dunkler, und es trägt auf
     allen drei hellen Flächen. */
  --warm-600: #625b4d;
  --ink:      #14232a;   /* petrol-getöntes Fast-Schwarz */
  --ink-700:  #2f4149;

  /* --- E1-Signaturgrau (bleibt) --- */
  --gray-900: #1a1c1e;
  --gray-700: #3d4145;
  --gray-500: #7f7f7f;
  --gray-400: #a3a3a3;
  --gray-300: #d4d6d8;
  --gray-200: #e7e9eb;
  --gray-100: #f2f4f5;
  --gray-050: #f8f9fa;

  --white: #ffffff;
  --black: #000000;

  /* --- Status --- */
  --success: #3d9a5d;
  --warning: #c98a2b;
  --danger:  #c0492f;

  /* Akzent-Auswahl (Default) */
  --accent-base:   var(--acc-gruen);
  --accent-strong: var(--acc-gruen-strong);
}

[data-accent="turkis"] { --accent-base: var(--acc-turkis); --accent-strong: var(--acc-turkis-strong); }
[data-accent="gruen"]  { --accent-base: var(--acc-gruen);  --accent-strong: var(--acc-gruen-strong); }
[data-accent="mint"]   { --accent-base: var(--acc-mint);   --accent-strong: var(--acc-mint-strong); }

/* ---------- LIGHT = Sand / Papyrus ---------- */
:root,
[data-theme="light"] {
  --surface-page:    var(--sand-100);
  --surface-card:    var(--sand-050);
  --surface-subtle:  var(--sand-200);
  --surface-inverse: var(--petrol-900);
  --surface-raised:  #ffffff;

  --text-strong:  var(--ink);
  --text-body:    var(--ink-700);
  --text-muted:   var(--warm-600);
  --text-on-dark: var(--sand-050);

  --border-subtle:  var(--sand-300);
  --border-default: var(--sand-400);

  /* Primäraktionen laufen auf Petrol (kontraststark, weiße Schrift) */
  --accent:          var(--petrol-600);
  --accent-hover:    var(--petrol-700);
  --accent-contrast: #ffffff;
  --accent-soft:     var(--petrol-050);
  --accent-text:     var(--petrol-600);

  /* Flächen & Rahmen bleiben Petrol — der Akzent ist NICHT flächig */
  --fill-soft:       var(--petrol-050);
  --fill-line:       var(--petrol-300);

  /* Akzentfarbe = nur kleine Hervorhebungen: Kennzahlen, Aktivzustände, dünne Linien */
  --highlight:       var(--accent-strong);
  --highlight-soft:  var(--petrol-050);
  --focus-ring:      var(--petrol-600);

  /* Rückwärtskompatible Aliase */
  --signal:     var(--petrol-600);
  --signal-400: var(--accent-base);
  --signal-600: var(--petrol-700);
  --signal-050: var(--petrol-050);
  --blue-bright: var(--petrol-300);
  --graphite-900: var(--petrol-950);
  --graphite-800: var(--petrol-900);
  --graphite-700: var(--petrol-800);
  --graphite-600: var(--petrol-700);
}

/* ---------- DARK = Petrol ---------- */
[data-theme="dark"] {
  --surface-page:    var(--petrol-950);
  --surface-card:    var(--petrol-800);
  --surface-subtle:  var(--petrol-900);
  --surface-inverse: var(--sand-050);
  --surface-raised:  var(--petrol-700);

  --text-strong:  #eef6f7;
  --text-body:    #c2d4d8;
  --text-muted:   #7f9aa2;
  --text-on-dark: #eef6f7;

  --border-subtle:  var(--petrol-700);
  --border-default: var(--petrol-600);

  /* Primäraktionen laufen auch im Dunkelmodus auf Petrol */
  --accent:          var(--petrol-400);
  --accent-hover:    var(--petrol-300);
  /* Auf Petrol-400 ergab #04161c 4,28:1. Reines Schwarz bringt 4,86:1 und
     ist am Knopf mit blossem Auge nicht zu unterscheiden. */
  --accent-contrast: #000000;
  --accent-soft:     color-mix(in srgb, var(--petrol-400) 20%, transparent);
  --accent-text:     var(--petrol-200);

  --fill-soft:       color-mix(in srgb, var(--petrol-400) 18%, transparent);
  --fill-line:       var(--petrol-500);

  /* Akzent nur punktuell */
  --highlight:       var(--accent-base);
  --highlight-soft:  color-mix(in srgb, var(--petrol-400) 20%, transparent);
  --focus-ring:      var(--accent-base);

  --signal:      var(--petrol-400);
  --signal-400:  var(--petrol-300);
  --signal-600:  var(--petrol-500);
  --signal-050:  color-mix(in srgb, var(--petrol-400) 18%, transparent);
  --blue-bright: var(--petrol-200);
  --graphite-900: var(--petrol-950);
  --graphite-800: var(--petrol-900);
  --graphite-700: var(--petrol-800);
  --graphite-600: var(--petrol-700);
}