/*
 * File: base.css
 * Project: ABC Miet-WC Touren-Planer PWA
 *
 * Reset, Schrift-Definition, globale Element-Defaults, Fokus-Stile und
 * A11y-Anpassungen für reduzierte Bewegung.
 *
 * Hängt von tokens.css ab (Farben, Radien, Motion, Typografie).
 */

/* ============================================================
   FONT-FACE
   font-display: swap verhindert FOIT (Flash Of Invisible Text)
   beim ersten Laden über langsame Verbindungen.
   ============================================================ */
@font-face {
    font-family: 'GeosansLight';
    src: url(../../fonts/GeosansLight.ttf) format('woff');
    font-display: swap;
}

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

html, body, #container { margin: 0; padding: 0; }

body {
    font-family: var(--font-brand);
    font-size: var(--text-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#container {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-bg);
    transition: filter var(--duration-base) var(--ease-standard);
}

h1, h2, h3, h4, h5, h6 {
    margin: var(--space-2);
    font-weight: 600;
    color: var(--color-text);
}

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

a ion-icon {
    vertical-align: middle;
    margin-top: -.25rem;
}

div { margin: 0; padding: 0; }

button, input, textarea, select {
    font-family: var(--font-brand);
    border-radius: var(--radius-sm);
}

button { cursor: pointer; }

button:active {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
    outline: none;
}

/* ============================================================
   FOKUS – :focus-visible nur bei Tastatur-Navigation
   Sichtbarer Fokus-Ring für A11y; verschwindet bei Touch/Maus
   damit Buttons nicht ständig hervorgehoben bleiben.
   ============================================================ */
:focus { outline: none; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   TEXT IN BESTIMMTEN BEREICHEN ERLAUBEN
   body hat user-select:none global – aber Kommentartexte und
   Eingabefelder müssen markierbar bleiben.
   ============================================================ */
input, textarea, [contenteditable='true'] { user-select: text; }

/* ============================================================
   REDUCED MOTION
   Schaltet alle dekorativen Animationen + Transitions ab.
   Zustände (Status-Farben, Blink-Borders) werden statisch
   abgebildet, damit kritische Information erhalten bleibt.
   ============================================================ */
@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;
    }
}