/* global.css*/ @tailwind base; @tailwind components; @tailwind utilities; /* Light theme tokens */ :root { --background: #f1f5f9; /* slate-100 */ --foreground: #0f172a; /* slate-900 */ --littwin-blue: #00aeef; --color-background: #f1f5f9; --color-surface: #ffffff; --color-surface-alt: #f8fafc; /* slate-50 */ --color-border: #e2e8f0; /* slate-200 */ --color-fg: #0f172a; /* slate-900 */ --color-fg-muted: #475569; /* slate-600 */ /* Alias for convenience (used in components) */ --color-muted: var(--color-fg-muted); --color-accent: #00aeef; --color-accent-soft: #e0f7ff; --color-danger: #dc2626; /* red-600 */ --color-warning: #f59e0b; /* amber-500 */ --color-success: #16a34a; /* green-600 */ --color-info: #0ea5e9; /* sky-500 */ --color-ring: #38bdf8; /* sky-400 */ --color-input-bg: #ffffff; --color-input-border: #cbd5e1; /* slate-300 */ } /* Dark theme overrides (activated via .dark class on ) */ .dark { --background: #0f1115; --foreground: #e2e8f0; --color-background: #0f1115; /* near slate-950 */ --color-surface: #1c232d; /* custom dark surface */ --color-surface-alt: #243140; /* slightly elevated */ --color-border: #334155; /* slate-600 */ --color-fg: #e2e8f0; /* slate-200 */ --color-fg-muted: #94a3b8; /* slate-400 */ --color-muted: var(--color-fg-muted); --color-accent: #00aeef; --color-accent-soft: #06394d; /* soft accent background */ --color-danger: #ef4444; /* red-500 */ --color-warning: #fbbf24; /* amber-400 */ --color-success: #22c55e; /* green-500 */ --color-info: #38bdf8; /* sky-400 */ --color-ring: #0ea5e9; --color-input-bg: #1c232d; --color-input-border: #475569; } body { color: var(--color-fg); background: var(--color-background); font-family: Arial, Helvetica, sans-serif; accent-color: var(--color-accent); } /* Smooth theme transitions (respect reduced motion) */ @media (prefers-reduced-motion: no-preference) { html, body { transition: background-color .25s ease, color .25s ease; } .theme-transition { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } } @layer utilities { .text-balance { text-wrap: balance; } /* Semantic shortcut utilities */ .bg-background { background-color: var(--color-background); } .bg-surface { background-color: var(--color-surface); } .bg-surface-alt { background-color: var(--color-surface-alt); } .text-fg { color: var(--color-fg); } .text-fg-muted { color: var(--color-fg-muted); } .text-muted { color: var(--color-muted); } .border-base { border-color: var(--color-border); } .ring-accent { --tw-ring-color: var(--color-ring); } .bg-accent { background-color: var(--color-accent); } .bg-accent-soft { background-color: var(--color-accent-soft); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } /* Component abstractions (no @apply to avoid processing issues in global layer) */ .card { background: var(--color-surface); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: 0.375rem; /* rounded-md */ box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .card-elevated { background: var(--color-surface); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: 0.375rem; box-shadow: 0 4px 10px -2px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15); } .table-surface { background: var(--color-surface); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: 0.375rem; overflow: hidden; } .table-head { background: var(--color-surface-alt); color: var(--color-fg); font-weight: 500; border-bottom: 1px solid var(--color-border); } .table-row-hover:hover { background-color: color-mix(in srgb,var(--color-surface-alt) 85%,transparent); } .btn-accent { background: var(--color-accent); color: #fff; border-radius: 0.375rem; padding: 0.5rem 1rem; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: filter .2s ease, box-shadow .2s ease; } .btn-accent:hover { filter: brightness(1.1); } .btn-accent:focus { outline: 2px solid var(--color-ring); outline-offset: 2px; } /* Button Variants */ .btn-primary { @media (prefers-reduced-motion: no-preference) { transition: background-color .2s ease, filter .2s ease; } background: var(--color-accent); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } .btn-primary:hover { filter:brightness(1.1); } .btn-primary:focus { outline:2px solid var(--color-ring); outline-offset:2px; } .btn-muted { background: var(--color-muted); color: var(--color-fg); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } .btn-muted:hover { background: var(--color-fg); color: var(--color-background); } .btn-outline { background: transparent; color: var(--color-fg); border:1px solid var(--color-border); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } .btn-outline:hover { background: var(--color-surface-alt); } .btn-danger { background: var(--color-danger); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } .btn-danger:hover { filter:brightness(1.1); } .input-base { background: var(--color-input-bg); color: var(--color-fg); border: 1px solid var(--color-input-border); border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; } .input-base:focus { border-color: var(--color-ring); outline: 1px solid var(--color-ring); outline-offset: 2px; } .input-base:disabled { opacity: 0.6; cursor: not-allowed; } } /* Form elements use tokens */ input, select, textarea { background-color: var(--color-input-bg) !important; color: var(--color-fg) !important; border: 1px solid var(--color-input-border); } input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; /* ensure consistent visibility */ } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-ring); outline-offset: 2px; border-color: var(--color-ring); } .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected { background-color: var(--littwin-blue) !important; color: white !important; } .react-datepicker__day--selected:hover { background-color: #0095cc !important; /* dunklere Version von Littwin-Blau */ } .react-datepicker__day--today { border: 1px solid var(--littwin-blue); } .custom-datepicker-popper { z-index: 9999 !important; /* Maximale Priorität */ } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dropdown-text-fix { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; transform: translateZ(0); /* For some Chromium bugs */ }