/* ──────────────────────────────────────────────────────────────
   Reset und Element-Defaults. Setzt Tokens voraus (theme-*.css).
   ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Roboto, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }

/* Klassen mit display-Regel würden das Attribut sonst überstimmen. */
[hidden] { display: none !important; }

a { color: var(--blush); text-decoration: none; }
a:hover { color: var(--text); }

img, svg { max-width: 100%; }

code, pre, .mono {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: .9em;
}

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--blush-veil); color: var(--text); }

/* ── Die Rollleiste ──────────────────────────────────────────────
   Die des Systems bringt ihr eigenes Bild mit – hell, breit, mit
   Pfeilen – und passt in keines von beiden Themes. Sie gilt deshalb
   überall, wo etwas scrollt: Seite, Modal, Textfeld, Liste, der Faden
   der Inbox. Die Farben kommen wie alle anderen aus dem Theme, hell
   wie dunkel.

   Zwei Wege, weil die Browser zwei kennen. Der eine sind die beiden
   Eigenschaften – dabei vererbt sich `scrollbar-color`, `scrollbar-width`
   aber nicht: die Farbe genügt einmal an html, die Breite muss jedes
   Element selbst bekommen. Der andere sind die Pseudo-Elemente von
   WebKit; ohne Selektor davor gelten sie für jedes Element. Neuere
   Chrome-Versionen kennen beide Wege und nehmen den ersten, sobald er
   dasteht – die zwei müssen also dasselbe ergeben.
   ────────────────────────────────────────────────────────────── */

html { scrollbar-color: var(--scroll) transparent; }
*    { scrollbar-width: thin; }

::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track { background: transparent; }

/* Der durchsichtige Rand am Griff macht den Abstand zur Kante, ohne die
   Leiste breiter zu machen. */
::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 999px;
    background: var(--scroll);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover  { background: var(--scroll-hover); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--scroll-grab);  background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Kleines Grossbuchstaben-Label, wiederkehrend in Sidebar und Panels */
.micro {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}