/* ============================================================================
GitHubDB · css/tokens.css — DESIGN TOKENS
----------------------------------------------------------------------------
SINGLE SOURCE OF TRUTH für das gesamte Design-System. Alle Farben,
Abstände, Radien, Typo-Maße, Schatten, Z-Index-Werte und Transitions
leben hier als CSS-Custom-Properties auf :root.
REGEL FÜR ALLE ANDEREN CSS-DATEIEN:
- Keine magischen Zahlen/Farben außerhalb dieser Datei einführen.
- Immer Tokens referenzieren (var(--…)).
- Werte hier NICHT aus den Token-Definitionen herauskopieren.
Vollständige Doku & Verantwortlichkeiten: siehe DESIGN_SYSTEM.md
========================================================================== */
:root {
/* ----------------------------------------------------------
Schriften — reine System-Stacks, KEIN Google Fonts ,
kein Download. Mono ist für ALLE Zahlen/Metriken Pflicht.
---------------------------------------------------------- */
--font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono",
Menlo, Consolas, monospace;
/* ----------------------------------------------------------
Palette — dunkel, kühl, eigener Charakter. Off-black, kein reines
Schwarz (#000), kein reines Weiß (#fff) für Text auf dunklen Flächen.
---------------------------------------------------------- */
--bg: #0a0e14; /* Seitenhintergrund (off-black, blaustichig) */
--bg-elev: #0f141b; /* erhabene Fläche (Topbar) */
--surface-1: #121a24; /* Karten, Tabellen, Dialoge */
--surface-2: #1a2431; /* Hover, nested Surfaces */
--surface-3: #24303f; /* stark erhabene Flächen (Tooltip) */
--border: #232f3d; /* Hairline (1px) */
--border-strong: #3b4a5c; /* hervorgehobene Kanten */
--text-1: #e9edf3; /* primär — kein reines Weiß */
--text-2: #aab6c2; /* sekundär */
--text-3: #8e9aab; /* tertiär / Meta (AA auf allen Surfaces) */
/* ----------------------------------------------------------
Akzent — GENAU EINER: GitHub-Grün (#3fb950-Familie).
Nur für interaktive Elemente, Links, Highlights, Primär-Buttons.
---------------------------------------------------------- */
--accent: #3fb950; /* Texte, Links, Highlight, Fokus */
--accent-hover: #56d364; /* Hover für --accent-Texte */
--accent-strong: #1f883d; /* Primär-Button-Fläche (AA mit Weiß) */
--accent-strong-hover: #2ea043; /* Primär-Button-Hover */
--accent-muted: rgba(63, 185, 80, 0.16); /* aktive Nav, Tönung */
--accent-border: rgba(63, 185, 80, 0.45); /* subtile grüne Kanten */
--accent-contrast: #ffffff; /* Text AUF --accent-strong
(einzige erlaubte Ausnahme
zu "kein reines Weiß") */
/* ----------------------------------------------------------
Semantische Farben — NUR für Status, NICHT als UI-Akzente.
--info ausschließlich für Datenvisualisierung (Chart-Serien).
---------------------------------------------------------- */
--danger: #f85149; /* Fehler / negativ */
--warning: #d29922; /* Warnung */
--success: #3fb950; /* Erfolg */
--info: #4493f8; /* NUR Datenvisualisierung */
/* ----------------------------------------------------------
Datenvisualisierung — Info-Blau als Chart-Serie, Semantik für +/-.
Sprach-Farben liegen im JS (js/util.js → LANG_COLORS).
---------------------------------------------------------- */
--chart-series: #4493f8; /* Hauptserie (Info-Blau) */
--chart-series-2: #79c0ff; /* gestapelte/helle Serie */
--chart-series-3: #1f6feb; /* gestapelte/dunkle Serie */
--chart-pos: #3fb950; /* hinzugefügte Zeilen (Code-Frequenz) */
--chart-neg: #f85149; /* gelöschte Zeilen */
--chart-fallback: #3b4859; /* "Andere"-Segment / fehlende Sprachfarbe */
/* ----------------------------------------------------------
Fokus-Ring (a11y) — konsistent auf allen interaktiven Elementen.
---------------------------------------------------------- */
--focus-ring: #3fb950;
--focus-ring-soft: rgba(63, 185, 80, 0.28);
/* ----------------------------------------------------------
Spacing-Skala — kompaktes Daten-Cockpit (Dichte 7-8).
---------------------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
/* ----------------------------------------------------------
Radius-Skala — EINE konsistente Formsprache:
Karten/Panels = --radius-md (8px), Buttons/Inputs = --radius-sm (6px),
Chips/Pills/Badges = --radius-pill (voll rund).
---------------------------------------------------------- */
--radius-sm: 6px; /* Buttons, Inputs, Chips */
--radius-md: 8px; /* Karten, Panels, Tabellen, Dialoge */
--radius-lg: 12px; /* große Container (Consent-Banner) */
--radius-pill: 999px; /* Pills/Badges — volle Rundung */
/* ----------------------------------------------------------
Typo-Skala (kompakt) + Zeilenhöhen.
---------------------------------------------------------- */
--text-xs: 12px;
--text-sm: 13px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 16px;
--text-xl: 18px;
--text-2xl: 22px;
--text-3xl: 28px;
--leading-xs: 1.4;
--leading-sm: 1.5;
--leading-base: 1.55;
--leading-md: 1.5;
--leading-lg: 1.5;
--leading-xl: 1.4;
--leading-2xl: 1.3;
--leading-3xl: 1.2;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* ----------------------------------------------------------
Schatten — dezent, getönt (neutral-schwarz mit leichtem Grünstich),
KEINE großen Glows. Hairlines vorziehen.
---------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
--shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.55),
0 0 0 1px var(--border-strong); /* Dropdown, Dialog, Tooltip */
/* ----------------------------------------------------------
Z-Index-Skala — dokumentiert. Niemals magische Z-Werte.
---------------------------------------------------------- */
--z-base: 1; /* Standard */
--z-nav: 100; /* sticky Topbar */
--z-dropdown: 200; /* "Mehr"-Menü (position:fixed) */
--z-dialog: 300; /*