@import "tailwindcss";

@theme inline {
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
}

/* ---------------------------------------------------------------- Dark Mode

   Umgesetzt über `light-dark()` statt über `dark:`-Klassen.

   Der Grund: Die Oberfläche benutzt an rund 440 Stellen feste Farbklassen wie
   `bg-slate-50` oder `text-slate-900`. Jede davon um eine `dark:`-Variante zu
   ergänzen wäre eine riesige, fehleranfällige Fleißarbeit — und jede künftige
   Zeile müsste daran denken. Stattdessen werden hier die Farbvariablen
   umdefiniert, die Tailwind ohnehin benutzt: `bg-slate-50` wird zu
   `background-color: var(--color-slate-50)`, und was diese Variable enthält,
   entscheidet sich hier.

   Welche Hälfte von `light-dark()` gilt, steuert `color-scheme` — deshalb
   genügt für den Umschalter ein Attribut am <html>-Element. Ohne Attribut
   folgt die Anwendung dem Betriebssystem, ganz ohne JavaScript.

   Die dunklen Werte sind keine bloße Spiegelung: Reines Schwarz unter weißer
   Schrift flimmert. Die Flächen liegen deshalb bei 16–26 % Helligkeit, mit
   demselben leicht blauen Ton wie die helle Reihe.
*/

@theme {
  /* Grautöne. Hell: die Reihe von Tailwind. Dunkel: von dunkel nach hell
     gedreht, damit `text-slate-900` weiterhin „die kräftigste Schrift“
     bedeutet und `bg-slate-50` „der ruhigste Grund“. */
  --color-slate-50: light-dark(oklch(98.4% 0.003 247.858), oklch(16.5% 0.018 265));
  --color-slate-100: light-dark(oklch(96.8% 0.007 247.896), oklch(21% 0.02 265));
  --color-slate-200: light-dark(oklch(92.9% 0.013 255.508), oklch(28% 0.022 262));
  --color-slate-300: light-dark(oklch(86.9% 0.022 252.894), oklch(34% 0.026 260));
  --color-slate-400: light-dark(oklch(70.4% 0.04 256.788), oklch(58% 0.032 258));
  --color-slate-500: light-dark(oklch(55.4% 0.046 257.417), oklch(68% 0.03 257));
  --color-slate-600: light-dark(oklch(44.6% 0.043 257.281), oklch(77% 0.025 257));
  --color-slate-700: light-dark(oklch(37.2% 0.044 257.287), oklch(85% 0.02 257));
  --color-slate-800: light-dark(oklch(27.9% 0.041 260.031), oklch(91% 0.014 258));
  --color-slate-900: light-dark(oklch(20.8% 0.042 265.755), oklch(96.5% 0.008 258));
  --color-slate-950: light-dark(oklch(12.9% 0.042 264.695), oklch(99% 0.003 258));

  /* Flächen. `bg-white` wäre im Dunkeln falsch, `text-white` dagegen richtig
     (es steht auf farbigem Grund) — beide teilen sich aber dieselbe Variable.
     Deshalb tragen Flächen einen eigenen Namen: `bg-surface`. */
  --color-surface: light-dark(#ffffff, oklch(22.5% 0.02 264));

  /* Akzent auf dunklem Grund. Die Reihe selbst bleibt, wie das
     Erscheinungsbild sie setzt — hier wird nur eine andere Stufe gewählt:
     Fließtext braucht im Dunkeln eine hellere, Flächen eine dunklere. */
  --color-accent-text: light-dark(
    var(--color-indigo-600),
    var(--color-indigo-400)
  );
  --color-accent-soft: light-dark(
    var(--color-indigo-50),
    color-mix(in oklab, var(--color-indigo-500) 22%, oklch(22.5% 0.02 264))
  );
  --color-accent-soft-fg: light-dark(
    var(--color-indigo-700),
    var(--color-indigo-300)
  );

  /* Immer dunkel, unabhängig vom Thema: die Fläche hinter einem Dialog und
     der Grund einer Videovorschau. */
  --color-scrim: oklch(20.8% 0.042 265.755);
}

:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

body {
  background-color: var(--color-slate-50);
  color: var(--color-slate-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Sichtbarer, einheitlicher Fokusring für Tastaturbedienung. */
:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* Neutrale Fläche hinter der Vorschau. Der QR-Code bringt seine eigene
   Hintergrundfarbe mit — der leichte Grauton hebt auch weiße Codes ab. */
.qr-canvas {
  background-color: var(--color-slate-100);
}