/**
 * Purpose:    The base layer: CSS reset, base typography, focus styles.
 * Depends on: tokens.css (uses the semantic tokens for color/spacing values).
 * Used by:    Linked second, right after tokens.css, in views/layout/app.php
 *             and views/layout/guest.php.
 * UI rules:   Element selectors ("input { ... }") are allowed HERE — this is
 *             the reset layer — but not in layout.css or components.css. See
 *             _docs/design-system.md for the full rule.
 */

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

html {
    -webkit-text-size-adjust: 100%;
    /* Sprungziele rutschen sonst unter die klebende Topbar. */
    scroll-padding-top: calc(var(--topbar-h) + var(--space-4));
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-default);
    background: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ueberschriften tragen hier nur Groesse, Gewicht und Farbe. Jede dekorative
   Zutat (Trennlinie, Abstand nach oben) ist Sache der Komponenten
   .page__title / .section__title — die automatische border-top auf jedem h2
   war der Grund, warum der erste Abschnitt jeder Seite vom Titel
   abgeschnitten wurde. */
h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
h4 { font-size: var(--text-sm); }

p {
    margin: 0 0 var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

ul, ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
}

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

a:hover {
    text-decoration: underline;
}

strong {
    font-weight: var(--weight-semibold);
    color: var(--text-strong);
}

small {
    font-size: var(--text-sm);
}

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

img {
    display: block;
}

hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-6) 0;
}

/* Formularelemente erben die Schrift nicht von selbst. */
button, input, select, textarea {
    font: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Ein einziger Fokusring fuer die gesamte Anwendung. Bewusst :focus-visible
   und nicht :focus — die bisherige :focus-Regel an Eingabefeldern loeste auch
   beim blossen Mausklick aus. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--accent-subtle);
    color: var(--text-strong);
}

::placeholder {
    color: var(--text-subtle);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}