/* ============================================================
 * Boardly Base Styles — Story 0007a
 *
 * Globale Grundregeln, die ueber alle Seiten/Komponenten gelten.
 * Erweitert tokens.css mit Layout-Grundlagen und BFSG-Foundations
 * (Focus-Visible + Reduced-Motion).
 *
 * Reihenfolge im HTML: tokens.css VOR base.css laden.
 * ============================================================ */

/* ---------- Box-Model + Layout-Reset ---------- */

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--f-sans);
    font-size: 13.5px;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

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

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

/* ---------- BFSG: Focus-Visible ---------- */
/* Klar sichtbarer Fokus-Indikator bei Tastatur-Navigation (WCAG 2.1 AA).
 * 'focus-visible' greift NICHT bei Maus-Klick — das schuetzt vor
 * UX-unfreundlichen Outlines in Pointer-Kontexten.
 */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

/* ---------- BFSG: Reduced-Motion ---------- */
/* Respektiert User-Setting "Bewegung reduzieren" (OS-/Browser-Pref).
 * Animationen und Transitionen werden auf ~0ms gesetzt —
 * aber nicht komplett entfernt (das wuerde State-Change-Signale killen).
 */

@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;
    }
}