@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

/*
 * Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit
 * halten. Die Bereichsfarben kommen aus der Datenbank und werden zur Laufzeit
 * gesetzt, nicht hier.
 */
:root {
  --radius: 0.625rem;

  --hintergrund: oklch(0.99 0.002 250);
  --vordergrund: oklch(0.21 0.02 260);
  --karte: oklch(1 0 0);
  --karte-vordergrund: oklch(0.21 0.02 260);
  --gedaempft: oklch(0.96 0.004 250);
  --gedaempft-vordergrund: oklch(0.5 0.015 260);
  --rand: oklch(0.91 0.006 255);
  --eingabe: oklch(0.91 0.006 255);
  --ring: oklch(0.55 0.16 258);

  --betont: oklch(0.52 0.17 258);
  --betont-vordergrund: oklch(0.99 0.002 250);
  --gefahr: oklch(0.55 0.21 27);
  --gefahr-vordergrund: oklch(0.99 0.002 250);
  --erfolg: oklch(0.6 0.13 155);
  --warnung: oklch(0.7 0.15 75);
}

.dark {
  --hintergrund: oklch(0.17 0.015 262);
  --vordergrund: oklch(0.95 0.005 250);
  --karte: oklch(0.21 0.018 262);
  --karte-vordergrund: oklch(0.95 0.005 250);
  --gedaempft: oklch(0.26 0.018 262);
  --gedaempft-vordergrund: oklch(0.7 0.015 258);
  --rand: oklch(0.31 0.018 262);
  --eingabe: oklch(0.31 0.018 262);
  --ring: oklch(0.62 0.15 258);

  --betont: oklch(0.62 0.16 258);
  --betont-vordergrund: oklch(0.17 0.015 262);
  --gefahr: oklch(0.62 0.19 25);
  --gefahr-vordergrund: oklch(0.98 0.002 250);
  --erfolg: oklch(0.68 0.12 155);
  --warnung: oklch(0.78 0.13 75);
}

@theme inline {
  --color-hintergrund: var(--hintergrund);
  --color-vordergrund: var(--vordergrund);
  --color-karte: var(--karte);
  --color-karte-vordergrund: var(--karte-vordergrund);
  --color-gedaempft: var(--gedaempft);
  --color-gedaempft-vordergrund: var(--gedaempft-vordergrund);
  --color-rand: var(--rand);
  --color-eingabe: var(--eingabe);
  --color-ring: var(--ring);
  --color-betont: var(--betont);
  --color-betont-vordergrund: var(--betont-vordergrund);
  --color-gefahr: var(--gefahr);
  --color-gefahr-vordergrund: var(--gefahr-vordergrund);
  --color-erfolg: var(--erfolg);
  --color-warnung: var(--warnung);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-rand outline-ring/50;
  }

  body {
    @apply bg-hintergrund text-vordergrund;
    font-feature-settings:
      'liga' 1,
      'calt' 1;
  }

  /* Wer mit der Tastatur bedient, muss sehen, wo er ist. */
  :focus-visible {
    @apply outline-ring outline-2 outline-offset-2;
  }
}