/* ========================================= BASE ========================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; background-color: #ffffff; color: #111827; /* gray-900 */ } /* ========================================= LINKS ========================================= */ a { color: #2563eb; /* blue-600 */ text-decoration: none; } a:hover { text-decoration: underline; } /* ========================================= CARDS / BOXES ========================================= */ .card { background-color: #ffffff; color: #111827; } /* ========================================= BUTTONS ========================================= */ button, .btn { font-family: inherit; cursor: pointer; } button:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================= FORMS ========================================= */ input, select, textarea { font-family: inherit; font-size: 1rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid #d1d5db; /* gray-300 */ background-color: #ffffff; color: #111827; } input::placeholder, textarea::placeholder { color: #6b7280; /* gray-500 */ } /* ========================================= DARK MODE Aktiveres ved: ========================================= */ html.dark body { background-color: #020617; /* slate-950 */ color: #e5e7eb; /* gray-200 */ } /* Cards */ html.dark .card, html.dark .bg-white { background-color: #0f172a; /* slate-900 */ color: #e5e7eb; } /* Borders */ html.dark .border { border-color: #334155; /* slate-700 */ } /* Links */ html.dark a { color: #93c5fd; /* blue-300 */ } html.dark a:hover { color: #bfdbfe; /* blue-200 */ } /* Buttons */ html.dark button, html.dark .btn { color: #e5e7eb; } /* Gray background buttons */ html.dark .bg-gray-200, html.dark .bg-gray-300 { background-color: #e5e7eb; color: #020617; } /* Dark background buttons */ html.dark .bg-slate-800, html.dark .bg-slate-900 { background-color: #1e293b; color: #e5e7eb; } /* Forms */ html.dark input, html.dark select, html.dark textarea { background-color: #020617; color: #e5e7eb; border-color: #334155; } html.dark input::placeholder, html.dark textarea::placeholder { color: #94a3b8; /* slate-400 */ } /* ========================================= TEXT COLORS (fix for Tailwind-like classes) ========================================= */ html.dark .text-gray-500, html.dark .text-gray-600, html.dark .text-gray-700 { color: #cbd5f5; /* slate-300 */ } html.dark .text-gray-800, html.dark .text-gray-900 { color: #e5e7eb; }