@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Heller Modus.
     Die Werte sind gegen die WCAG-Kontraste geprüft: Text erreicht überall
     mindestens 4,5:1, Bedienelemente 3:1. Insbesondere `faint` und `accent`
     sind bewusst dunkler als die naheliegenden Tailwind-Stufen – slate-400
     käme auf 2,56:1 und Weiß auf green-600 nur auf 3,30:1. */
  :root {
    --color-ground: 248 250 252;
    --color-surface: 255 255 255;
    --color-raised: 241 245 249;
    --color-line: 203 213 225;
    --color-ink: 15 23 42;
    --color-muted: 71 85 105;
    --color-faint: 91 107 128;
    --color-accent: 21 128 61;
    --color-accent-ink: 255 255 255;
    --color-positive: 21 128 61;
    --color-negative: 190 18 60;
    --color-warning: 180 83 9;
  }

  /* Diagrammfarben, heller Modus.
     Die Reihenfolge der Serienfarben ist die Absicherung gegen Farbfehlsichtigkeit
     und wurde gegen die Flächen dieser Anwendung geprüft – nicht umsortieren.
     Grün/Rot wäre als Serienpaar bei Deuteranopie nicht unterscheidbar (ΔE 7,9)
     und bleibt deshalb den Vorzeichen im Text vorbehalten. */
  :root {
    --viz-series-1: #2a78d6;
    --viz-series-2: #eb6834;
    --viz-series-3: #1baf7a;
    --viz-grid: #e2e8f0;
    --viz-axis: #94a3b8;
    --viz-label: #64748b;
    --viz-surface: #ffffff;
    --viz-good: #0ca30c;
    --viz-warning: #fab219;
    --viz-critical: #d03b3b;
  }

  /* Dunkler Modus – die Vorgabe der Anwendung */
  .dark {
    --color-ground: 15 17 21;
    --color-surface: 24 27 33;
    --color-raised: 33 37 45;
    --color-line: 59 66 80;
    --color-ink: 226 232 240;
    --color-muted: 148 163 184;
    /* Heller als slate-500: dort läge der Hilfstext bei 3,62:1. */
    --color-faint: 129 142 163;
    --color-accent: 34 197 94;
    --color-accent-ink: 4 20 11;
    --color-positive: 74 222 128;
    --color-negative: 248 113 113;
    --color-warning: 251 191 36;

    /* Eigene Stufen für die dunkle Fläche, kein automatisches Umdrehen. */
    --viz-series-1: #3987e5;
    --viz-series-2: #d95926;
    --viz-series-3: #199e70;
    --viz-grid: #2b3038;
    --viz-axis: #4b5563;
    --viz-label: #94a3b8;
    --viz-surface: #181b21;
    --viz-good: #0ca30c;
    --viz-warning: #fab219;
    --viz-critical: #d03b3b;
  }

  html {
    @apply h-full;
  }

  body {
    @apply h-full bg-ground font-sans text-ink antialiased;
  }

  #root {
    @apply h-full;
  }

  /* Sichtbarer Fokus überall – die Anwendung ist vollständig per Tastatur bedienbar. */
  :focus-visible {
    @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-ground;
  }

  ::-webkit-scrollbar {
    @apply h-2 w-2;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-line;
  }
}

@layer components {
  .card {
    @apply rounded-card border border-line bg-surface;
  }

  /* Zahlen sollen untereinander bündig stehen. */
  .tabular {
    font-variant-numeric: tabular-nums;
  }
}