/* ==========================================================================
   Onyx Webmail - Farbschemata
   8 dunkle und 3 helle Schemata, jeweils in 4 Kontraststufen.
   Jedes Schema legt nur wenige Grundwerte fest, alles andere wird daraus
   berechnet. Neue Bausteine duerfen ausschliesslich diese Variablen nutzen.
   ========================================================================== */

:root {
  /* Wird von den Einstellungen ueberschrieben */
  --akzent: #8b5cf6;

  --erfolg: #35b06b;
  --warnung: #d8a531;
  --gefahr: #e0554f;

  --radius: 10px;
  --radius-klein: 6px;
  --schrift: 15px;
  --zeilen: 1.5;

  --schrift-familie: "Segoe UI", system-ui, -apple-system, "Noto Sans", Roboto, Arial, sans-serif;
  --schrift-fest: "Cascadia Mono", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
}

/* ------------------------------------------------------------ Kontraststufen */
html            { --hebung1:  6%; --hebung2: 11%; --rand-anteil: 13%; --leise: 58%; --sehr-leise: 38%; }
html[data-kontrast="1"] { --hebung1: 4%;  --hebung2: 8%;  --rand-anteil: 8%;  --leise: 45%; --sehr-leise: 30%; }
html[data-kontrast="2"] { --hebung1: 6%;  --hebung2: 11%; --rand-anteil: 13%; --leise: 58%; --sehr-leise: 38%; }
html[data-kontrast="3"] { --hebung1: 9%;  --hebung2: 15%; --rand-anteil: 22%; --leise: 72%; --sehr-leise: 50%; }
html[data-kontrast="4"] { --hebung1: 12%; --hebung2: 19%; --rand-anteil: 34%; --leise: 86%; --sehr-leise: 64%; }

/* ---------------------------------------------------------------- Zeilenhoehe */
html[data-zeilenhoehe="eng"]    { --zeilen: 1.32; --zeilen-liste: 1.25; --liste-luft: 6px; }
html[data-zeilenhoehe="normal"] { --zeilen: 1.5;  --zeilen-liste: 1.4;  --liste-luft: 9px; }
html[data-zeilenhoehe="weit"]   { --zeilen: 1.72; --zeilen-liste: 1.6;  --liste-luft: 13px; }

/* -------------------------------------------------------------- Ableitungen */
html {
  /* --heben hebt Flaechen an (immer heller), --tiefe erzeugt Raender und
     Trennlinien (bei dunklen Schemata hell, bei hellen dunkel). */
  --flaeche:   color-mix(in srgb, var(--hg), var(--heben) var(--hebung1));
  --flaeche-2: color-mix(in srgb, var(--hg), var(--heben) var(--hebung2));
  --flaeche-3: color-mix(in srgb, var(--hg), var(--heben) calc(var(--hebung2) * 1.6));
  --rand:      color-mix(in srgb, var(--hg), var(--tiefe) var(--rand-anteil));
  --rand-stark:color-mix(in srgb, var(--hg), var(--tiefe) calc(var(--rand-anteil) * 2));
  --text-leise:      color-mix(in srgb, var(--text) var(--leise), transparent);
  --text-sehr-leise: color-mix(in srgb, var(--text) var(--sehr-leise), transparent);
  --akzent-weich: color-mix(in srgb, var(--akzent) 18%, transparent);
  --akzent-rand:  color-mix(in srgb, var(--akzent) 45%, transparent);
  --akzent-text: #fff;
  --auswahl: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
  --schatten: 0 8px 24px rgba(0, 0, 0, .35);
}

/* ============================== Dunkle Schemata ============================ */

html[data-schema="onyx"] {
  --hg: #14101f; --text: #eae5f7; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #8b5cf6;
}
html[data-schema="mitternacht"] {
  --hg: #0f1420; --text: #e0e8f6; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #4f8ef7;
}
html[data-schema="kohle"] {
  --hg: #16181a; --text: #e7e9eb; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #8b98a8;
}
html[data-schema="wald"] {
  --hg: #101a14; --text: #e0efe5; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #3fa96b;
}
html[data-schema="tiefsee"] {
  --hg: #0b1a1e; --text: #daeef2; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #21a2b8;
}
html[data-schema="espresso"] {
  --hg: #1b1512; --text: #f1e6dd; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #c98a4b;
}
html[data-schema="nordlicht"] {
  --hg: #0d1720; --text: #ddf1f2; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #56d0c0;
}
html[data-schema="amethyst"] {
  --hg: #1a1020; --text: #f1e3f8; --heben: #ffffff; --tiefe: #ffffff; --akzent-vorgabe: #c26bd8;
}

/* =============================== Helle Schemata ============================ */

html[data-schema="papier"] {
  --hg: #f6f2ea; --text: #2a2622; --heben: #ffffff; --tiefe: #000000; --akzent-vorgabe: #6d4bd6;
  --schatten: 0 8px 22px rgba(60, 45, 20, .14);
}
html[data-schema="tageslicht"] {
  --hg: #f7f8fa; --text: #1e2226; --heben: #ffffff; --tiefe: #000000; --akzent-vorgabe: #2f6fed;
  --schatten: 0 8px 22px rgba(20, 30, 50, .12);
}
html[data-schema="leinen"] {
  --hg: #efeae0; --text: #262320; --heben: #ffffff; --tiefe: #000000; --akzent-vorgabe: #a2683a;
  --schatten: 0 8px 22px rgba(70, 55, 30, .16);
}

/* Helle Schemata: die Auswahl darf nicht zu satt werden, sonst ist der Text
   in der Liste nicht mehr gut lesbar. */
html[data-schema="papier"],
html[data-schema="tageslicht"],
html[data-schema="leinen"] {
  --auswahl: color-mix(in srgb, var(--akzent) 15%, #ffffff);
  --akzent-text: #ffffff;
}