/* ============================================================================
   Radiant Garden — Design Tokens (Single Source of Truth)
   ----------------------------------------------------------------------------
   Zentrale Definition aller Marken-Farben, Typografie und Maße für
   weave.radiantgarden.io. Jede Seite/Rolle bindet diese Datei ein
   (<link rel="stylesheet" href="/shared/theme.css">) und referenziert
   ausschließlich diese Variablen statt fester Hex-Werte.

   Zwei Ebenen:
     1. PRIMITIVE  — die rohe Palette (Grautöne, Markenfarben). Nicht direkt
        in Komponenten verwenden, sondern nur über semantische Tokens.
     2. SEMANTIC   — rollenbasierte Tokens (bg, surface, text, brand, ...).
        Diese in Komponenten verwenden. So lässt sich die Palette an einer
        Stelle ändern, ohne jede Komponente anzufassen.

   Abgeleitet aus der Markenseite radiantgarden.io.
   ============================================================================ */

:root {
  /* --- 1. PRIMITIVE: warmes Graustufen-Spektrum --- */
  --rg-grey-950: #111110;  /* tiefster Hintergrund            */
  --rg-grey-900: #1c1b1a;  /* Basis-Hintergrund (Seite)       */
  --rg-grey-850: #232220;  /* Fläche / Karte                  */
  --rg-grey-800: #2b2a28;  /* erhöhte Fläche / Rahmen         */
  --rg-grey-700: #3a3836;  /* kräftigerer Rahmen / Divider    */
  --rg-grey-400: #9aa1ab;  /* gedämpfter Text                 */
  --rg-grey-200: #cfd2d7;  /* sekundärer Text                 */
  --rg-grey-50:  #f3f4f6;  /* primärer Text / "Ink"           */

  /* --- 1. PRIMITIVE: Markenfarben --- */
  --rg-orange-500: #fd5000;  /* Marke (primär)                       */
  --rg-orange-600: #e04800;  /* Marke, Hover/aktiv (dunkler)         */
  --rg-blue-500:   #0058bc;  /* Akzent als Fläche (heller Text drauf)*/
  --rg-blue-400:   #5aa2ff;  /* Akzent als Vordergrund/Link auf Dark */

  /* --- 2. SEMANTIC: Flächen & Rahmen --- */
  --rg-bg:            var(--rg-grey-900);
  --rg-bg-deep:       var(--rg-grey-950);
  --rg-surface:       var(--rg-grey-850);
  --rg-surface-2:     var(--rg-grey-800);
  --rg-border:        var(--rg-grey-800);
  --rg-border-strong: var(--rg-grey-700);

  /* --- 2. SEMANTIC: Text --- */
  --rg-text:        var(--rg-grey-50);
  --rg-text-muted:  var(--rg-grey-400);
  --rg-text-subtle: var(--rg-grey-200);

  /* --- 2. SEMANTIC: Marke & Akzent ---
     VERWENDUNG — wann Orange, wann Blau:
       Orange (--rg-brand)  = PRIMÄR: Aktion & Identität. Sparsam einsetzen.
         • primäre Buttons / Haupt-Call-to-Action
         • aktiver/ausgewählter Zustand ("du bist hier", aktiver Nav-Punkt)
         • gezielte Hervorhebungen, Marken-Akzente
         → Faustregel: pro Ansicht möglichst nur EIN Orange-Blickfang.
       Blau  (--rg-accent / --rg-link) = SEKUNDÄR: Navigation & Information.
         • Inline-Textlinks (--rg-link, aufgehellt für Kontrast auf Dark)
         • sekundäre Buttons / weniger wichtige Aktionen
         • Info-Hinweise, Info-Status (--rg-info)
       --rg-accent    = Blau als FLÄCHE (Button/Badge) mit hellem Text darauf.
       --rg-link      = Blau als VORDERGRUND (Text/Link/Icon) auf dunklem Grund.
     Status-Farben nur für echte Zustände verwenden, nicht als Deko. */
  --rg-brand:       var(--rg-orange-500);
  --rg-brand-hover: var(--rg-orange-600);
  --rg-accent:      var(--rg-blue-500);
  --rg-link:        var(--rg-blue-400);

  /* --- 2. SEMANTIC: Status (für Releases/Contracts) --- */
  /* Vorschlag, auf dunkles Warmgrau abgestimmt — bei Bedarf anpassen. */
  --rg-success: #3fb950;
  --rg-warning: #d29922;
  --rg-danger:  #f85149;
  --rg-info:    var(--rg-blue-500);

  /* --- Typografie --- */
  --rg-font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rg-font-mono: 'SF Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;

  /* --- Radius --- */
  --rg-radius-sm: 4px;
  --rg-radius-md: 8px;
  --rg-radius-lg: 12px;

  /* --- Layout ---
     Höhe der geteilten Top-Navbar (/shared/nav.js). nav.js misst die echte Höhe
     und schreibt sie zur Laufzeit auf <html>; dieser Wert ist nur der Fallback,
     bis das passiert. Zentral hier (theme.css wird überall geladen), damit
     MkDocs (rg-material.css) und die App-Sidebar (sidebar.css) denselben Vertrag
     --weave-nav-h nutzen statt je eigene Literale. */
  --weave-nav-h: 37px;

  /* Geteilter "schwebender Toggle": der Mobile-Burger auf Contracts/Releases
     (sidebar.css, .weave-sidebar-toggle) UND der MkDocs-Drawer-/Such-Button
     (weave-Repo, rg-material.css) leiten Größe und Abstände aus diesen Tokens
     ab — eine Quelle, damit beide Flächen identisch sind und eine Änderung hier
     überall greift. Der Radius nutzt --rg-radius-md. */
  --weave-toggle-size:  34px;  /* Kantenlänge des quadratischen Buttons      */
  --weave-toggle-gap:   8px;   /* Abstand unterhalb der Navbar               */
  --weave-toggle-inset: 10px;  /* Abstand zum linken/rechten Fensterrand     */
}

/* --- Basis: Seiten-Canvas & UI-Chrome im Dark-Mode -------------------------
   Zwei Symptome, eine Ursache: der Hintergrund liegt nur auf body-/Komponenten-
   Ebene, nicht auf dem Wurzel-Canvas (<html>), und der Browser kennt das Schema
   der Seite nicht.

   background: --rg-bg  → der Bereich AUSSERHALB des Dokuments (Overscroll /
     Rubber-Band beim "Überscrollen") zeigt den Canvas von <html>. Ohne
     explizites Background fällt der auf Browser-Weiß zurück → sichtbares Weiß
     oben/unten beim Überscrollen.
   color-scheme: dark   → der Browser rendert UI-Chrome (insb. die [Overlay-]
     Scrollbar) dunkel statt im hellen Default. Sonst erscheint beim Scrollen
     ein hellgrauer Scrollbar-Streifen auf der dunklen Seite. */
html {
  background: var(--rg-bg);
  color-scheme: dark;
}

/* Inter, selbst gehostet (DSGVO — kein Google-Aufruf). Zentral hier, damit
   nicht jede Seite ihre eigene @font-face-Deklaration pflegen muss. */
@font-face {
  font-family: 'Inter';
  src: url('/shared/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}