@import 'tailwindcss';

/* Tailwind 4 ist CSS-first: die Gestaltung steht hier, nicht in einer
   tailwind.config.js. Was unter @theme steht, wird zu Hilfsklassen — aus
   --color-grund wird bg-grund, text-grund, border-grund. */
@theme {
    --color-grund: #0b0d10;
    --color-flaeche: #14181d;
    --color-flaeche-hoch: #1c222a;
    --color-rand: #2a323c;
    --color-schrift: #e6eaf0;
    --color-schrift-leise: #93a1b1;

    --color-akzent: #4ea3ff;
    --color-akzent-tief: #1b4f85;

    --color-gut: #3fb950;
    --color-schlecht: #f85149;
    --color-warn: #d29922;

    --font-sans:
        ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
}

html,
body,
#wurzel {
    height: 100%;
}

body {
    background: var(--color-grund);
    color: var(--color-schrift);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Der Fokusrahmen bleibt sichtbar. Ein Dashboard, das sich nur mit der Maus
   bedienen lässt, ist bei 900 Kacheln kein Vergnügen. */
:focus-visible {
    outline: 2px solid var(--color-akzent);
    outline-offset: 2px;
}

::selection {
    background: var(--color-akzent-tief);
}

/* Ein ruhiger Verlauf statt einer flachen Flaeche. Er kostet nichts und nimmt
   dem Dunkel die Pappigkeit — auf einem grossen Monitor sieht ein einfarbiger
   Hintergrund aus wie ein Ladefehler. */
body {
    background-image: radial-gradient(
        1200px 600px at 50% -10%,
        color-mix(in oklab, var(--color-akzent) 7%, transparent),
        transparent 70%
    );
    background-attachment: fixed;
}

/* Bildlaufleisten im Ton der Oberflaeche. Die hellen Standardleisten von
   Windows reissen in einem dunklen Fenster jedes Mal ein Loch. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-rand) transparent;
}

/* Was neu hereinkommt, blendet auf. Ohne das springen 60 Kacheln auf einmal
   ins Bild und man sucht die Stelle, an der man war. */
@keyframes auftauchen {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.auftauchen {
    animation: auftauchen 0.18s ease-out;
}

/* Wer das nicht will, bekommt es nicht. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}