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

html {
  color-scheme: dark;
}

:root {
  /* OKLCH Zentral-Farbsystem */
  --oklch-background: 0.145 0.01 148;
  --oklch-surface: 0.20 0.01 148;
  --oklch-surface-hover: 0.25 0.012 148;
  --oklch-primary: 0.68 0.18 255;
  --oklch-primary-hover: 0.75 0.18 255;
  --oklch-secondary: 0.76 0.15 155;
  --oklch-text-main: 0.98 0 0;
  --oklch-text-muted: 0.70 0.01 148;
  --oklch-border: 0.31 0.012 148;

  /* Classic HSL Mappings */
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 217 91% 60%;
  --radius: 0.75rem;
}

input, select, textarea, option {
  background-color: oklch(var(--oklch-surface)) !important;
  color: oklch(var(--oklch-text-main)) !important;
  border: 1px solid oklch(var(--oklch-border) / 0.4) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: oklch(var(--oklch-primary)) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px oklch(var(--oklch-primary) / 0.2) !important;
}

option {
  color: oklch(var(--oklch-text-main)) !important;
  background-color: oklch(var(--oklch-surface)) !important;
}