/* ========================================= 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; } /* ========================================= LINKS ========================================= */ a { color: #2563eb; /* blue-600 */ text-decoration: none; } a:hover { text-decoration: underline; } /* ========================================= CARDS / BOXES ========================================= */ .card { transition: background-color 0.15s ease, box-shadow 0.15s ease; } /* ========================================= 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 */ } 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; } /* Card hover – KUN visuel feedback, ingen farveskift */ html.dark .card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.35); } /* Borders */ html.dark .border { border-color: #334155; /* slate-700 */ } /* ========================================= LINKS (DARK MODE – FIX) ========================================= */ html.dark a { color: #93c5fd; /* blue-300 */ } /* ❗ Hover må IKKE ændre tekstfarve globalt */ html.dark a:hover { color: #93c5fd; text-decoration: underline; } /* Links inde i cards må ALDRIG skifte farve */ html.dark .card a:hover { color: inherit; } /* ========================================= BUTTONS (DARK MODE – FIX) ========================================= */ html.dark button, html.dark .btn { background-color: #1e293b; /* slate-800 */ color: #e5e7eb; } html.dark button:hover, html.dark .btn:hover { background-color: #334155; /* slate-700 */ color: #e5e7eb; } /* ❗ Gray buttons må ikke blive lyse i dark mode */ html.dark .bg-gray-200, html.dark .bg-gray-300 { background-color: #1e293b; /* slate-800 */ color: #e5e7eb; } /* Dark background buttons */ html.dark .bg-slate-800, html.dark .bg-slate-900 { background-color: #1e293b; color: #e5e7eb; } /* ========================================= FORMS (DARK) ========================================= */ 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 (Tailwind-like fixes) ========================================= */ 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; } :root { --bg-main: #ffffff; --bg-card: #ffffff; --text-main: #111827; } html.dark { --bg-main: #020617; --bg-card: #0f172a; --text-main: #e5e7eb; } body { background: var(--bg-main); color: var(--text-main); } .card, .bg-white { background: var(--bg-card); }