/* =========================================================================
   Design-Tokens fuer amauri.ch

   Einzige Quelle fuer Farben, Schriftgroessen und Durchschuss. Eingebunden
   von index.html, impressum.html, datenschutz.html und _includes/blog-base.njk.
   Wer einen Wert aendert, aendert ihn fuer alle Seiten.

   Zur Historie: die Seiten sind getrennt entstanden und benutzen zwei
   Vokabulare fuer dieselben Dinge (--gold / --accent, --muted / --text-muted,
   --font-sans / --display). Beide Namen sind hier definiert und tragen
   denselben Wert. Alte Regeln laufen unveraendert weiter, neue Regeln
   nehmen die Namen aus der Spalte "kanonisch".
   ========================================================================= */

:root{
  /* ---- Flaechen ------------------------------------------------------- */
  --bg:#141414;
  --bg-elev:#1b1b1b;        /* frueher --bg-soft auf der Startseite */
  --bg-elev-2:#232323;
  --glass:rgba(255,255,255,.04);
  --glass-mid:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.09);
  --tint:rgba(255,255,255,.034);
  --halo:rgba(20,20,20,.78);

  /* ---- Linien --------------------------------------------------------- */
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);

  /* ---- Text ----------------------------------------------------------- */
  --text:#f0ede6;
  --muted:#8a92a0;          /* kanonisch */
  --text-muted:#8a92a0;     /* Zweitname, Blog und Rechtsseiten */
  --faint:#767e8c;          /* kanonisch */
  --text-faint:#767e8c;     /* Zweitname */
  /* Kontrast auf --bg: 4.58:1. Der fruehere Wert #444d5a lag bei 2.19:1 und
     traf saemtliche Meta-Zeilen im Blog sowie den Stand-Vermerk der
     Rechtsseiten. Wer den Wert senkt, prueft ihn gegen 4.5:1. */

  /* ---- Akzent --------------------------------------------------------- */
  --gold:#d4af37;           /* kanonisch */
  --accent:#d4af37;         /* Zweitname */
  --gold-bright:#e8cc7a;
  --accent-bright:#e8cc7a;
  --accent-text:#e8cc7a;
  /* Zwei Deckkraefte, bewusst getrennt: der Verlauf auf den Leistungskarten
     liegt flacher als die Flaeche hinter Inline-Code im Artikel. */
  --gold-soft:rgba(212,175,55,.08);
  --accent-soft:rgba(212,175,55,.10);
  --ok:#46C26B;

  /* ---- Chrome --------------------------------------------------------- */
  --header-bg:rgba(20,20,20,.65);   /* kanonisch */
  --nav-bg:rgba(20,20,20,.65);      /* Zweitname */
  --footer-bg:rgba(43,43,43,.38);
  --menu-bg:rgba(20,20,20,.96);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 20px 44px -16px rgba(0,0,0,.55);

  /* ---- Raster --------------------------------------------------------- */
  --max:1320px;

  /* ---- Schriften ------------------------------------------------------ */
  --font-sans:'Space Grotesk',sans-serif;   /* kanonisch */
  --font-mono:'JetBrains Mono',monospace;   /* kanonisch */
  --display:'Space Grotesk',sans-serif;     /* Zweitname */
  --body:'Space Grotesk',sans-serif;        /* Zweitname */
  --mono:'JetBrains Mono',monospace;        /* Zweitname */

  /* ---- Schriftgroessen ------------------------------------------------
     Nach Rolle gesetzt, nicht nach Gefuehl. Wer eine neue Groesse braucht,
     prueft zuerst, ob eine bestehende Rolle passt. */
  --fs-2xs:.68rem;      /* Mono-Kicker, Nummern, Tags, Badges */
  --fs-xs:.78rem;       /* Formularlabels, Footer, Kleintext */
  --fs-sm:.88rem;       /* Meta: Rollen, Jahre, Beschriftungen, TOC */
  --fs-base:.94rem;     /* Fliesstext in Karten und schmalen Spalten */
  --fs-md:1.05rem;      /* Section-Intro unter der h2, Formularfelder */
  --fs-lg:1.15rem;      /* Lead-Absaetze */
  --fs-title-sm:1.18rem;/* Listentitel, Stationsnamen */
  --fs-title-md:1.3rem; /* Kartentitel, alle Raster */

  /* Artikelsatz im Blog: eigene Stufen, weil dort ueber 720px
     Spaltenbreite gelesen wird und der Kartensatz zu klein waere. */
  --fs-article:1.18rem;
  --fs-article-lead:1.24rem;
  --fs-article-quote:1.35rem;
  --fs-article-h2:1.85rem;

  /* ---- Durchschuss ----------------------------------------------------
     Folgt der Schriftgroesse: je groesser die Type, desto enger. */
  --lh-display:1.05;    /* h1 und grosse h2 */
  --lh-heading:1.14;    /* h2, Karten- und Stationstitel */
  --lh-title:1.22;      /* Listentitel */
  --lh-meta:1.5;        /* dichter Kleintext */
  --lh-body:1.62;       /* Fliesstext in schmalen Spalten */
  --lh-prose:1.72;      /* Fliesstext ab 1.05rem */
  --lh-article:1.8;     /* Artikelsatz, 720px Spalte */

  color-scheme:dark;
}