111 lines
2.8 KiB
CSS
111 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Light Mode: Maximierter Kontrast (Reines Weißer Hintergrund + Tiefschwarzer Text) */
|
|
--background: 0 0% 100%;
|
|
--foreground: 224 71% 4%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 224 71% 4%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 224 71% 4%;
|
|
|
|
/* Primary: Cyan/Blau lesbarer gemacht */
|
|
--primary: 199 100% 35%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
/* Muted & Accent: Deutlich dunklerer Text für Barrierefreiheit */
|
|
--secondary: 220 14% 90%;
|
|
--secondary-foreground: 224 71% 4%;
|
|
--muted: 220 14% 92%;
|
|
--muted-foreground: 220 20% 28%;
|
|
/* Vorher 40% Helligkeit, jetzt 28% (viel dunkler) */
|
|
--accent: 220 14% 90%;
|
|
--accent-foreground: 224 71% 4%;
|
|
|
|
--destructive: 0 84% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 14% 75%;
|
|
/* Grenzen sichtbarer gemacht */
|
|
--input: 220 14% 75%;
|
|
--ring: 199 100% 35%;
|
|
--radius: 0.75rem;
|
|
}
|
|
|
|
.dark {
|
|
/* Dark Mode: Reines Tiefschwarz erhöht den Kontrast zu weißem Text drastisch */
|
|
--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: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
/* Muted Text: Helligkeit massiv erhöht, damit Beschreibungen lesbar sind */
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-foreground: 240 5% 75%;
|
|
/* Vorher 56.9% Helligkeit, jetzt 75% (viel heller) */
|
|
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 72% 51%;
|
|
/* Helleres Rot für dunklen Hintergrund */
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 3.7% 25%;
|
|
/* Grenzen im Dunkeln besser sichtbar */
|
|
--input: 240 3.7% 25%;
|
|
--ring: 240 4.9% 83.9%;
|
|
}
|
|
}
|
|
|
|
/* Automatischer High-Contrast-Modus für Betriebssystem-Vorgaben */
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--foreground: 0 0% 0%;
|
|
--muted-foreground: 0 0% 0%;
|
|
--border: 0 0% 0%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 0 0% 0%;
|
|
--foreground: 0 0% 100%;
|
|
--muted-foreground: 0 0% 100%;
|
|
--border: 0 0% 100%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
|
|
/* Glassmorphism Kontraste geschärft (höhere Deckkraft) */
|
|
.glass {
|
|
@apply bg-white/20 backdrop-blur-md border border-white/40;
|
|
}
|
|
|
|
.glass-dark {
|
|
@apply bg-black/40 backdrop-blur-md border border-white/20;
|
|
}
|
|
|
|
.text-gradient {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-sky-500 to-blue-600 dark:from-primary dark:to-blue-400;
|
|
}
|
|
} |