/* App styles — leest kleuren/typografie uit assets/theme.css.php Zorg dat je in eerst /assets/theme.css.php laadt en daarna deze file. Alle var(--*) hebben fallbacks voor het geval theme.css.php niet geladen is. */ /* GEEN :root hier — we overschrijven niets uit theme.css.php */ /* Reset / basis */ * { box-sizing: border-box; } body{ margin: 0; font-family: var(--font-base, Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif); font-size: var(--font-size, 16px); line-height: var(--line-height, 1.5); background: var(--bg, #0f172a); color: var(--text, #e7ecef); } /* Layout helpers */ .wrap{ min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: var(--space-6, 24px); flex-direction: column; } .container{ max-width: var(--container-max, 960px); margin: 0 auto; padding: var(--space-6, 24px); } /* Cards */ .card{ width: 100%; background: var(--card, #111827); border: 1px solid var(--border, #243244); border-radius: var(--radius-lg, 16px); padding: 28px; box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,.25)); } /* Typografie */ h1{ margin: 0 0 16px; font-size: 24px; color: var(--text, #e7ecef); } label{ display: block; margin: 10px 0 6px; color: var(--text, #e7ecef); opacity: .9; font-size: 14px; } /* Meldingen */ .errors{ background: var(--surface, #0f1520); border: 1px solid var(--border, #374151); border-radius: var(--radius-md, 12px); padding: 12px; margin: 0 0 12px; color: var(--danger, #ef4444); } /* Inputs */ input{ width: 100%; padding: 12px 14px; border: 1px solid var(--border, #334155); background: var(--surface, #0b1220); color: var(--text, #e5e7eb); border-radius: var(--radius-md, 12px); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } input::placeholder{ color: color-mix(in oklab, var(--text, #e7ecef), black 35%); opacity: .7; } input:focus{ border-color: var(--link, #4f46e5); box-shadow: 0 0 0 3px color-mix(in oklab, var(--link, #4f46e5), white 75%); } /* Buttons */ .btn{ width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius-md, 12px); color: var(--btn-primary-txt, #ffffff); font-weight: 700; cursor: pointer; margin-top: 14px; background: linear-gradient( 90deg, var(--btn-primary, #4f46e5), color-mix(in oklab, var(--btn-primary, #4f46e5), white 10%) ); transition: filter .15s ease, transform .02s ease; } .btn:hover{ filter: brightness(1.05); } .btn:active{ transform: translateY(1px); } /* Links */ a{ color: var(--link, #4f46e5); text-decoration: none; } a:hover{ color: var(--link-hover, #6366f1); } /* Kleine helpers */ .muted{ color: var(--text-muted, #94a3b8); } .accent{ color: var(--success, #22c55e); } .error { color: var(--danger, #ef4444); }