/* Slate surfaces, indigo actions. Fonts are self-hosted under the SIL OFL. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
/* The earlier styles retain layout; these rules supply the portal theme. */
body { font-family: var(--font-body); color: var(--text); font-size: 14px; font-optical-sizing: auto; }
h1, h2, h3, .brand, .guild-avatar { font-family: var(--font-heading); }
button, input, textarea, select, .btn, .breadcrumb strong, .inline-state,
.wizard-step, .wizard-option strong, .timezone-option strong { font-family: var(--font-body); }
.brand { font-size: 26px; letter-spacing: -.8px; }
.server-summary h1, .compact-title h1, .page-heading h1 { font-weight: 700; letter-spacing: -.7px; color: var(--text); }
.compact-section h2, .compact-section-title h2 { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.feature-label h3 { font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.feature-label p { font-size: 11.5px; }
.server-summary p, .server-plan, .compact-note, .helper, .fine { color: var(--muted); }
.server-plan, .compact-note { font-size: 11.5px; }
.sidebar { background: var(--sidebar); border-color: var(--line); }
.guild-picker { background: var(--raised); box-shadow: none; border: 1px solid var(--line); }
.guild-picker .small-label, .nav-label { font-family: var(--font-body); color: var(--subtle); font-size: 9px; font-weight: 600; letter-spacing: 1.2px; }
.guild-avatar { background: var(--accent-soft); color: #c6d2ff; }
.user-avatar { background: #363542; color: #dedcf1; }
.nav-item { color: var(--muted); font-size: 12px; }
.nav-item:hover { background: var(--raised); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: #d5deff; box-shadow: inset 2px 0 var(--accent-text); }
.nav-item.active svg { color: var(--accent-text); }
.nav-pill { color: var(--muted); border-color: var(--control-border); }
.user, .demo-strip, .topbar { border-color: var(--line); }
.topbar { background: var(--sidebar); }
.breadcrumb strong { color: var(--text); font-weight: 500; }
.topbar .version, .connection, .demo-strip { color: var(--subtle); }
.demo-strip strong { color: var(--muted); }
.demo-strip a, .text-link, .eyebrow { color: var(--accent-text); }
.text-link:hover, .demo-strip a:hover { color: #d5deff; }
.btn { color: var(--text); background: var(--raised); border-color: var(--control-border); font-size: 12px; font-weight: 550; }
.btn:hover { background: #30323b; border-color: #8b94aa; }
.configure-button { background: transparent; font-size: 11px; }
.btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--danger); }
.icon-button { color: var(--muted); }
.icon-button:hover { color: var(--text); background: var(--raised); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.switch span { background: #626978; }
.switch span:after { background: #edeef0; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span:after { background: #fff; }
.switch:has(input:focus-visible) span { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.switch input:focus-visible { outline: 0; }
.switch input:disabled + span { opacity: .4; }
.dot { background: var(--success); }
.dot.amber { background: var(--warm); }
.feature-row, .feature-list, .compact-details, .next-reminder,
.activity-row, .reminder-list, .reminder-row, .status-line { border-color: var(--line); }
.next-reminder h3, .activity-title, .status-line strong, .reminder-content h3 { color: var(--text); }
.next-time, .activity-detail, .activity-time, .compact-details > summary { color: var(--muted); }
.activity-icon, .module-icon { background: var(--accent-soft); color: var(--accent-text); }
.badge { color: var(--success); background: var(--success-soft); border-color: #376654; font-family: var(--font-body); font-size: 9px; }
.badge.neutral { color: var(--muted); background: var(--raised); border-color: var(--control-border); }
.badge.amber { color: var(--warm); background: var(--warning-soft); border-color: #84653e; }
.panel, .side-card, .plan-box, .module-card, .portal-dialog, .wizard { background: var(--panel); border-color: var(--line); }
.panel-header, .dialog-title, .dialog-actions { border-color: var(--line); }
.panel-header h2, .side-card h3, .plan-box h2, .wizard h1, .portal-dialog h2 { color: var(--text); font-weight: 650; }
.panel-header p, .side-card p, .plan-box > p, .plan-feature, .wizard .intro { color: var(--muted); }
.subsettings, .message-preview { background: var(--field); border-color: var(--line); }
.field label { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { background: var(--field); color: var(--text); border-color: var(--control-border); accent-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--subtle); opacity: 1; }
.field small, .timezone-option span { color: var(--muted); }
.portal-dialog .dialog-actions { background: var(--panel); }
.portal-dialog h2 { font-weight: 700; letter-spacing: -.4px; }
.message-preview h3, .preview-author { color: var(--muted); }
.message-preview p { color: var(--text); }
.portal-dialog ::selection, ::selection { background: #3c4f94; color: #fff; }
.savebar { background: var(--panel); color: var(--text); border-color: var(--control-border); box-shadow: 0 8px 30px #0005; }
.savebar svg { color: var(--accent-text); }
.timezone-input { background: var(--field); border-color: var(--control-border); }
.timezone-input input { background: transparent; }
.timezone-list { background: var(--raised); border-color: var(--control-border); }
.timezone-option:hover, .timezone-option.highlighted { background: var(--accent-soft); }
.timezone-option[aria-selected=true], .timezone-current { color: var(--accent-text) !important; }
.timezone-status { color: var(--muted); }
.timezone-input:has([aria-invalid=true]) { border-color: var(--danger); }
.wizard-option, .wizard-module { color: var(--text); border-color: var(--control-border); background: transparent; }
.wizard-option:has(input:checked), .wizard-module:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-text); }
.wizard-option input, .wizard-module input { accent-color: var(--accent); }
.wizard-option svg, .wizard-module svg { color: var(--accent-text); }
.setup-review, .wizard-review { border-color: var(--line); }
.wizard-review { background: var(--accent-soft); }
.wizard-review h3 { color: var(--text); }
.wizard-review p { color: var(--muted); }
.plan-box.featured { background: #191e30; border-color: #5363a5; }
.plan-price, .plan-feature svg { color: var(--accent-text); }
.notice { background: var(--accent-soft); border-color: #5363a5; color: var(--text); }
.notice p { color: var(--muted); }
.notice svg { color: var(--accent-text); }
.notice.amber { background: var(--warning-soft); border-color: #84653e; }
.notice.amber svg { color: var(--warm); }
#toast { background: var(--success-soft); border-color: #538e76; color: #d2f7e7; }
#toast.error { background: var(--danger-soft); border-color: #b36c71; color: #ffdad7; }
.login, .login-panel { background: var(--bg); }
.login-story { background: #191e30; }
.login-story h1, .login-card h2 { font-family: var(--font-heading); color: var(--text); }
.login-story h1 em { color: var(--accent-text); }
.login-story > p, .login-card p, .login-card .fine { color: var(--muted); }
.login-features span { color: var(--text); }
.login-features svg { color: var(--accent-text); }
@media (max-width:760px) {
  .feature-label p { font-size: 11px; }
  .configure-button { font-size: 11px; }
  .feature-controls { gap: 7px; }
  .server-plan { font-size: 11px; }
  .demo-strip { font-size: 10px; }
}