/* ── Light mode tokens ── */ :root { --cl-bg-body: #ffffff; --cl-bg-input: #ffffff; --cl-bg-social: #ffffff; --cl-border: #dddddd; --cl-text-heading: #3d1f0e; --cl-text-muted: #555555; --cl-text-divider: #999999; --cl-placeholder: #aaaaaa; --cl-input-text: #111111; --cl-social-hover: #f9f9f9; --cl-brand: #3d1f0e; --cl-brand-hover: #2e150a; } /* ── Dark mode tokens (Filament adds .dark to ) ── */ .dark { --cl-bg-body: transparent; --cl-bg-input: #2a2a2a; --cl-bg-social: #2a2a2a; --cl-border: #444444; --cl-text-heading: #e8d5c4; --cl-text-muted: #aaaaaa; --cl-text-divider: #777777; --cl-placeholder: #777777; --cl-input-text: #f0f0f0; --cl-social-hover: #333333; --cl-brand: #c47a45; --cl-brand-hover: #a8623a; } body { font-family: 'Inter', Arial, sans-serif; background: var(--cl-bg-body); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-container { width: 100%; max-width: 400px; text-align: center; } .logo img { height: 80px; margin: 0 auto 20px; } h2 { font-size: 20px; font-weight: 600; color: var(--cl-text-heading); margin-bottom: 20px; } form input { width: 100%; padding: 14px; margin-bottom: 15px; border: 1px solid var(--cl-border); border-radius: 10px; font-size: 15px; outline: none; background: var(--cl-bg-input); color: var(--cl-input-text); box-sizing: border-box; } form input::placeholder { color: var(--cl-placeholder); } form input:focus { border-color: var(--cl-brand); box-shadow: 0 0 0 2px rgba(61, 31, 14, 0.2); } .dark form input:focus { box-shadow: 0 0 0 2px rgba(196, 122, 69, 0.3); } button.signin { width: 100%; padding: 14px; background: var(--cl-brand); color: #ffffff; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; } button.signin:hover { background: var(--cl-brand-hover); } a.forgot { display: block; margin-top: 12px; font-size: 14px; color: var(--cl-text-muted); text-decoration: none; } a.forgot:hover { text-decoration: underline; } .divider { display: flex; align-items: center; margin: 20px 0; color: var(--cl-text-divider); font-size: 13px; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--cl-border); margin: 0 10px; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid var(--cl-border); border-radius: 8px; background: var(--cl-bg-social); color: var(--cl-input-text); font-size: 15px; cursor: pointer; text-decoration: none; box-sizing: border-box; } .social-btn img { height: 18px; } .social-btn:hover { background: var(--cl-social-hover); } .signup { margin-top: 20px; font-size: 14px; color: var(--cl-text-muted); } .signup a { font-weight: 600; color: var(--cl-brand); text-decoration: none; } .signup a:hover { text-decoration: underline; } .fi-simple-header { display: none !important; }