/* Skala typograficzna panelu. Reset mieszka w reset.css, bo ekran na tablecie
   bierze reset, a tych klas nie uzywa ani razu. */

.dat-text--display {
    font-size: var(--text-display-size);
    line-height: var(--text-display-lh);
    font-weight: var(--text-display-weight);
    letter-spacing: var(--text-display-tracking);
}

.dat-text--title {
    font-size: var(--text-title-size);
    line-height: var(--text-title-lh);
    font-weight: var(--text-title-weight);
    letter-spacing: var(--text-title-tracking);
}

.dat-text--subtitle {
    font-size: var(--text-subtitle-size);
    line-height: var(--text-subtitle-lh);
    font-weight: var(--text-subtitle-weight);
    letter-spacing: var(--text-subtitle-tracking);
}

.dat-text--body {
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    font-weight: var(--text-body-weight);
}

.dat-text--small {
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    font-weight: var(--text-small-weight);
}

/* Nagłówki grup i etykiety nad wartościami. Wersaliki niosą hierarchię
   bez powiększania stopnia pisma. */
.dat-text--overline {
    font-size: var(--text-overline-size);
    line-height: var(--text-overline-lh);
    font-weight: var(--text-overline-weight);
    letter-spacing: var(--text-overline-tracking);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Godziny, identyfikatory, wartości techniczne. Nigdy zdania. */
.dat-text--mono { font-family: var(--font-mono); }

.dat-text--muted { color: var(--color-text-muted); }
.dat-text--secondary { color: var(--color-text-secondary); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: var(--duration-instant) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--duration-instant) !important;
    }
}

/* Wspólna animacja spinnera — używają jej przyciski i (w kolejnym zadaniu)
   feedback, więc żyje w bazie zamiast w jednym z komponentów. */
@keyframes dat-spin { to { transform: rotate(360deg); } }