/* Mum n Me brand for the todo app.
   Colours and fonts come from the shop's Journal3 theme variables:
   "mum purple" #7171B1, "mum pink" #E486BA, body IBM Plex Sans, headings Playfair Display. */

:root {
    --brand-purple: #7171b1;
    --brand-purple-deep: #5d5d9e;
    --brand-pink: #e486ba;
    --brand-tint: #f4f3fa;
}

/* Default accent = brand purple; a colour the user picks in the accent picker still wins. */
html:not([data-accent]) { --accent: var(--brand-purple); }
html[data-theme="dark"]:not([data-accent]) { --accent: #9090cf; }

body, button, input, select, textarea {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.page-header h1, .editable-title-display, .profile-header h1, .modal-content h3,
.auth-card h2, .shared-list-heading h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0;
}

/* Header logo: full logo on wide screens, heart only on narrow ones. */
.brand-logo-link { display: inline-flex; align-items: center; margin-right: var(--space-4); flex: none; }
.brand-logo-link img { display: block; height: 30px; width: auto; }
.brand-logo-link .brand-logo-mark { display: none; height: 28px; }
@media (max-width: 760px) {
    .brand-logo-link .brand-logo-full { display: none; }
    .brand-logo-link .brand-logo-mark { display: block; }
}

/* Pink as the secondary brand colour, used sparingly. */
.assignee-chip.assignee-me { background: var(--brand-pink); color: #fff; }
.sidebar-nav li a.active { box-shadow: inset 3px 0 0 var(--brand-pink); }
.readonly-pill { border-color: var(--brand-pink); color: var(--brand-pink); }

/* ---- Login / sign-up / 2FA pages ---- */
body.auth-page { background: linear-gradient(135deg, #f7f6fc 0%, #f3ebf5 100%); }
.auth-logo img { display: block; margin: 0 auto; width: 100%; max-width: 280px; height: auto; }
.auth-logo p { color: #7a7a95; }
.auth-btn { background: var(--brand-purple); }
.auth-btn:hover { box-shadow: 0 4px 12px rgba(113, 113, 177, .35); }
.form-group input:focus, .code-input:focus { border-color: var(--brand-purple); box-shadow: 0 0 0 3px rgba(113, 113, 177, .15); }
.auth-footer a, .auth-footer a:hover { color: var(--brand-purple); }
@media (prefers-color-scheme: dark) {
    body.auth-page { background: linear-gradient(135deg, #12111a 0%, #1c1824 100%); }
    .auth-logo p { color: #9a9ab5; }
}