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

@layer base {
  /* Heller Modus */
  :root {
    --color-ground: 248 250 252;
    --color-surface: 255 255 255;
    --color-raised: 241 245 249;
    --color-line: 226 232 240;
    --color-ink: 15 23 42;
    --color-muted: 71 85 105;
    --color-faint: 148 163 184;
    --color-accent: 22 163 74;
    --color-accent-ink: 255 255 255;
    --color-positive: 21 128 61;
    --color-negative: 190 18 60;
    --color-warning: 180 83 9;
  }

  /* Dunkler Modus – die Vorgabe der Anwendung */
  .dark {
    --color-ground: 15 17 21;
    --color-surface: 24 27 33;
    --color-raised: 33 37 45;
    --color-line: 51 57 68;
    --color-ink: 226 232 240;
    --color-muted: 148 163 184;
    --color-faint: 100 116 139;
    --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;
  }

  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;
  }
}