/*
 * Stadler Consulting: Haut der 98er-Welt. Farben, Kanten, Schrift und die
 * Bildlaufleisten. Anordnung und Verhalten stehen in base.css, die
 * Gegenstücke der 11er-Welt in 11.css.
 *
 * Regeln stehen in docs/style-guide.md, Teil A. Farben kommen ausschließlich
 * als Custom Property aus :root, weiter unten steht nie ein Hex-Wert.
 * scripts/check.js prüft das bei jedem Build.
 */

:root {
  /* Flächen */
  --desktop: #008080;
  --face: #c0c0c0;
  --window: #fff;
  --tooltip: #ffffe1;
  --desktop-label: #fff;
  --update: #0a2a5c;

  /* 3D-Kanten, von hell nach dunkel */
  --highlight: #fff;
  --light: #dfdfdf;
  --shadow: #808080;
  --dark: #000;

  /* Text */
  --text: #000;
  --text-muted: #404040;
  --text-disabled: #808080;
  --text-inverse: #fff;
  --link: #0000b8;
  --link-hover: #1084d0;
  --link-hover-web: #c00;

  /* Auswahl, Titelleiste, Banner */
  --selection: #000080;
  --title-start: #000080;
  --title-end: #1084d0;
  --banner-end: #008080;

  /* Akzente */
  --accent-red: #c00;
  --accent-orange: #ffa030;

  /* Harte Schatten ohne Unschärfe */
  --drop-shadow: rgb(0 0 0 / 0.3);
  --drop-shadow-strong: rgb(0 0 0 / 0.35);

  /*
   * Kanten. Jede Fläche in Windows 98 ist eine von diesen:
   * raised    Fenster, Schaltfläche, Menü
   * pressed   gedrückte Schaltfläche
   * field     weißes Eingabe- oder Inhaltsfeld
   * status    flach vertieft: Statusleiste, Gruppenrahmen, Fortschrittsbalken
   * thin      flach erhaben: Symbolleistenknopf, Spaltenkopf
   * tab-frame Rahmen unter den Registerkarten
   */
  --bevel-raised: inset -1px -1px 0 var(--dark), inset 1px 1px 0 var(--light), inset -2px -2px 0 var(--shadow), inset 2px 2px 0 var(--highlight);
  --bevel-pressed: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--light), inset 2px 2px 0 var(--shadow), inset -2px -2px 0 var(--highlight);
  --bevel-field: inset -1px -1px 0 var(--light), inset 1px 1px 0 var(--shadow), inset -2px -2px 0 var(--highlight), inset 2px 2px 0 var(--dark);
  --bevel-status: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--highlight);
  --bevel-thin: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--highlight);
  --bevel-thin-pressed: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--highlight);
  --bevel-tab-frame: inset -1px -1px 0 var(--dark), inset 1px 1px 0 var(--highlight), inset -2px -2px 0 var(--shadow), inset 2px 2px 0 var(--light);

  /* Schriften: Oberfläche, Dokumentinhalt (Rechtstexte, Mail), Webseite im Browserfenster */
  --font-ui: "Share Tech Mono", Tahoma, Verdana, sans-serif;
  --font-document: Arial, Helvetica, Tahoma, sans-serif;
  --font-serif: "Times New Roman", Times, serif;
}


/* Bildlaufleisten wie in Windows 98. Firefox kennt nur Farben. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--face) var(--light);
  }
}

::-webkit-scrollbar {
  width: 17px;
  height: 17px;
  background: var(--light);
}

::-webkit-scrollbar-track {
  background: repeating-conic-gradient(var(--highlight) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner {
  min-width: 24px;
  min-height: 24px;
  background: var(--face);
  box-shadow: var(--bevel-raised);
}

::-webkit-scrollbar-button {
  display: block;
  width: 17px;
  height: 17px;
  background-color: var(--face);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--bevel-raised);
}

::-webkit-scrollbar-button:active {
  box-shadow: var(--bevel-pressed);
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='5' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='1'/><rect x='3' y='1' width='3' height='1'/><rect x='2' y='2' width='5' height='1'/><rect x='1' y='3' width='7' height='1'/><rect x='0' y='4' width='9' height='1'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='5' shape-rendering='crispEdges'><rect x='0' y='0' width='9' height='1'/><rect x='1' y='1' width='7' height='1'/><rect x='2' y='2' width='5' height='1'/><rect x='3' y='3' width='3' height='1'/><rect x='4' y='4' width='1' height='1'/></svg>");
}

::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='9' shape-rendering='crispEdges'><rect x='0' y='4' width='1' height='1'/><rect x='1' y='3' width='1' height='3'/><rect x='2' y='2' width='1' height='5'/><rect x='3' y='1' width='1' height='7'/><rect x='4' y='0' width='1' height='9'/></svg>");
}

::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='9' shape-rendering='crispEdges'><rect x='0' y='0' width='1' height='9'/><rect x='1' y='1' width='1' height='7'/><rect x='2' y='2' width='1' height='5'/><rect x='3' y='3' width='1' height='3'/><rect x='4' y='4' width='1' height='1'/></svg>");
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}