/*
 * Zollbox — Design-Tokens.
 *
 * Quelle: Lovable-Designstudie f0e85f9f-0669-4e8d-b8fd-4dcedf7fe011,
 * Commit d91f1cfc, src/styles.css. Dort in Tailwind-Syntax (@theme inline)
 * mit shadcn-Aliassen; hier ohne Framework, damit es direkt nach
 * wwwroot/css uebernommen werden kann.
 *
 * Farbregel: rot, gelb und gruen gehoeren der Severity. Nie als Dekoration.
 */

:root {
  /* Marke */
  --tinte: #101C2B;
  --pruefblau: #2456A6;
  --pruefblau-hell: #7FB2FF;
  --papier: #F7F8FA;
  --rand: #DDE2E8;

  /* Severity — ausschliesslich fuer Datenzustaende */
  --kritisch: #B3261E;
  --hinweis: #B26A00;
  --gueltig: #1E7B4F;

  /* Flaechen */
  --karte: #FFFFFF;
  --gedaempft: #EEF1F5;
  --gedaempft-text: #5A6675;

  --radius: 5px;

  --schrift-sans: "IBM Plex Sans", system-ui, sans-serif;
  --schrift-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/*
 * Schriften:
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
 */

html {
  font-family: var(--schrift-sans);
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 5rem;
}

body {
  background-color: var(--papier);
  color: var(--tinte);
  line-height: 1.6;
}

h1, h2, h3 {
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
  text-wrap: balance;
}

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

/* Jede Ziffer, die einen Code, eine Anzahl oder eine Kennung darstellt.
   Ohne tabular-nums verrutschen die Spalten. */
.ziffern {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@keyframes ziffer-ein {
  from { transform: translateY(0.55em); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}

.ziffer-slide {
  animation: ziffer-ein 260ms ease-out;
}

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