/* Shared light palette, loaded after each page's layout styles. */
:root {
  color-scheme: light;
  --bg: #f5f5f3;
  --bg-2: #eef0f2;
  --panel: #fff;
  --panel-2: #e9edf1;
  --line: #d7dce1;
  --text: #29323d;
  --muted: #606b77;
  --text-dim: #606b77;
  --text-faint: #68727d;
  --mint: #526a83;
  --p1: #526a83;
  --p2: #526a83;
  --accent-hover: #435b73;
  --accent-soft: #e7edf3;
  --accent-line: #b7c6d5;
  --ok: #3f705d;
  --ok-soft: #e9f2ed;
  --bad: #a64848;
  --bad-soft: #faeded;
  --warn: #8d611f;
  --warn-soft: #faf2e4;
  --grad: linear-gradient(120deg, #526a83, #526a83);
  --shadow: 0 16px 48px #29323d12;
  --wave-grid: #dde3e9;
  --wave-left: #526a83;
  --wave-right: #8399ad;
  --wave-idle: #8b9eaf;
  --speaking-rgb: 63, 112, 93;
}

body, body.portal { background: var(--bg); color: var(--text); }
::selection { background: #d5e1ed; color: #25384b; }
button:hover:enabled { filter: none; }
button, a, input, select, summary { -webkit-tap-highlight-color: #526a831a; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible { outline-color: var(--p1); }
input, select { accent-color: var(--p1); }
input::placeholder, .field::placeholder, .chat-form input::placeholder { color: var(--text-faint); opacity: 1; }
input:disabled, select:disabled { color: var(--text-dim); }

/* Introduction, space selection, and website account login. */
.p-nav, .p-strip, .p-card-end, .p-step, .p-footer,
.p-account details, .p-role-note { border-color: var(--line); }
.p-mark, .brand-mark, .studio-mark, .logo .mark { background: var(--p1); color: #fff; box-shadow: none; }
.p-mark i { background: #fff; }
.p-navlinks, .p-lead, .p-note, .p-strip span, .p-section-head p,
.p-card > p, .p-card-end p, .p-step p, .p-footer, .p-web-head p,
.p-account p, .p-account-bar span, .p-role-note { color: var(--text-dim); }
.p-navlinks a:hover, .p-hero h1 em, .p-account-bar a,
.p-account .p-link, .p-features li::before { color: var(--p1); }
.p-eyebrow, .p-card-number, .p-step small { color: var(--text-dim); }
.p-dot { background: var(--p1); box-shadow: none; }
.p-btn { background: var(--p1); color: #fff !important; border-color: var(--p1); }
.p-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.p-btn.outline { background: var(--panel); color: var(--p1) !important; border-color: var(--accent-line); }
.p-btn.outline:hover { background: var(--accent-soft); border-color: var(--p1); }
.p-console {
  background: linear-gradient(145deg, #fff, #edf1f5);
  border-color: #c7d1dc;
  box-shadow: 0 24px 60px #29323d12;
}
.p-console::before { background: radial-gradient(ellipse at 85% 0%, #526a8308, transparent 60%); }
.p-console-head, .p-console-sub, .p-console-foot span, .p-console-status { color: var(--text-dim); }
.p-console-title, .p-console-foot strong, .portal .p-section h2 { color: var(--text); }
.p-wave, .p-console-status { border-color: var(--line); }
.p-wave i { background: var(--p1); opacity: .85; }
.p-wave i:nth-child(3n) { opacity: .45; }
.p-wave::after { color: var(--text-dim); }
.p-card, .p-card.voice, .p-account { background: var(--panel); border-color: var(--line); }
.p-card, .p-account { box-shadow: 0 5px 20px #29323d04; }
.p-tag { background: var(--accent-soft); border-color: var(--accent-line); color: var(--p1); }
.p-features, .p-account label, .p-account summary { color: var(--text); }
.p-account-bar { background: #eff1f3; border-color: var(--line); }
.p-message { color: var(--p1); }
.p-message.error { color: var(--bad); }
.p-account input { background: #fff; border-color: #bcc5ce; color: var(--text); }
.p-account input:focus { border-color: var(--p1); box-shadow: 0 0 0 3px #526a8314; }
.access-banner, .dialog-access {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: #475e75;
}
.access-banner a, .dialog-access a { color: #3e5974; }

/* Workbench shell and navigation. */
.topbar, .studio-topbar, .rtop, .rctrl { background: var(--panel); border-color: var(--line); }
.brand-light, .studio-brand > span:not(.studio-mark) { color: var(--text-dim); }
.beta, .studio-brand small { border-color: var(--accent-line); color: var(--p1); background: var(--accent-soft); }
.text-button, .back-workbench, .nav-caption, .nav-caption span,
.nav-item, .sidebar-join, .eyebrow, .studio-eyebrow { color: var(--text-dim); }
.text-button:hover, .back-workbench:hover, .sidebar-join:hover { color: var(--p1); }
.profile { background: var(--accent-soft); color: var(--p1); border-color: var(--accent-line); }
.sidebar { background: #eff0ee; border-color: var(--line); }
.nav-item.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--p1); }
.nav-item:not(.active):hover { background: #e4e7e8; color: var(--text); }
.nav-count, .session-icon { color: var(--p1); }
.session-icon { background: var(--panel); border-color: var(--line); }
.sidebar-create { background: var(--panel); color: var(--p1); border-color: var(--accent-line); }
.sidebar-create:hover { background: var(--accent-soft); }
.mini-wave i { background: #7f94a8; }
.sidebar-bottom b { color: var(--text); }
.sidebar-bottom p, .sidebar-bottom > span { color: var(--text-dim); }
.connection-badge i, .playback-status i, .transport-center .tiny-dot { background: #89949e; }
.connection-badge.online { color: var(--ok); }
.connection-badge.online i { background: var(--ok); box-shadow: none; }
.secondary, .btn { background: #f1f3f5; border-color: #cdd4dc; color: var(--text); }
.secondary:hover:enabled, .btn:hover:enabled { background: #e7ebef; border-color: #aebcc9; box-shadow: none; }
.primary, .btn-primary, .btn.on { background: var(--p1); border-color: var(--p1); color: #fff; box-shadow: none; }
.primary:hover:enabled, .btn-primary:hover:enabled, .btn.on:hover:enabled { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--line); }
.btn-danger, .primary.sending, .button.recording { background: var(--bad-soft); border-color: #dab0b0; color: var(--bad); }
.btn-danger:hover:enabled, .primary.sending:hover:enabled, .button.recording:hover:enabled { background: #f5dddd; border-color: #c89393; }

/* Audio visualization and information surfaces. */
.panel, .card, .entry, .seat, .side, .modal { background: var(--panel); border-color: var(--line); }
.panel-heading { border-color: var(--line); }
.section-title svg { color: #687f94; }
.outline-tag { color: var(--text-dim); background: #f1f3f5; border-color: #cdd4dc; }
.outline-tag.live { color: var(--ok); background: var(--ok-soft); border-color: #abc8b9; }
.outline-tag.recording { color: var(--bad); background: var(--bad-soft); border-color: #dab0b0; }
.format-badge { color: var(--p1); }
.format-badge span, .wave-label, .wave-axis { color: var(--text-dim); }
.waveform-wrap { background: #f1f4f7; border-color: #d7e0e8; }
.meter-label > span, .meter-label b small, .meter-row > span, .meter-row > b,
.meter-ticks, .signal-specs small, .subtle { color: var(--text-dim); }
.meter-label b { color: var(--text); }
.meter-track { background: repeating-linear-gradient(to right, #dfe5ea 0, #dfe5ea 5px, transparent 5px, transparent 7px); }
.meter-fill {
  background: repeating-linear-gradient(to right, transparent 0, transparent 5px, #fff 5px, #fff 7px),
    linear-gradient(to right, #6888a2 0%, #526a83 75%, #b48742 91%, #b35c5c 100%);
}
.signal-specs, .monitor-readout .signal-specs { background: #f1f3f5; border-color: var(--line); }
.signal-specs > div, .signal-specs > div:nth-child(2) { border-color: var(--line); }
.number-badge { background: var(--accent-soft); color: var(--p1); }
.empty-icon { color: var(--text-dim); border-color: #bcc7d1; }
.empty-members b { color: var(--text); }
.empty-members p, .member-info small, .member-info em { color: var(--text-dim); }
.small-button { background: var(--accent-soft); color: var(--p1); border-color: var(--accent-line); }
.small-button:hover:enabled { background: #dbe5ee; }
.member-card, .member-row { background: #f8f9fa; border-color: var(--line); }
.member-avatar, .member-card:nth-child(2n) .member-avatar { background: #e1e8ef; color: #4b627b; }
.member-card.speaking { border-color: #83a591; box-shadow: inset 0 0 0 1px #83a591; }
.member-card.speaking .member-status { background: var(--ok); box-shadow: none; }
.member-status { background: var(--ok); }
.chat-log { scrollbar-color: #c0cad4 transparent; }
.chat-placeholder, .chat-message time, .chat-message.system, .msg.sys, .msg .time { color: var(--text-dim); }
.chat-message b, .msg .who { color: var(--p1) !important; }
.chat-form { background: #f7f8fa; border-color: #cdd4dc; }
.chat-form input { color: var(--text); }
.chat-form button, .chat-input button { background: var(--p1); color: #fff; }

/* Settings share the same quiet surfaces as the modules they control. */
.control-content label, dialog label, .entry label, .modal label,
.volume-heading, .talk-intro { color: var(--text-dim); }
select, option, dialog input, .field { background: #fff; border-color: #bcc5ce; color: var(--text); }
select:focus, dialog input:focus, .field:focus { border-color: var(--p1); box-shadow: 0 0 0 3px #526a8314; }
.inline-button, .volume-heading output, .screen-volume label output { color: var(--p1); }
.file-group input, .file-group small, .raw-notice small, .control-note,
.network-stats span, .playback-status, .tip-number, .tip-card p,
.page-footer, .transport-state small, .transport-center { color: var(--text-dim); }
.raw-notice { color: var(--ok); }
.check-circle { border-color: #8cac9a; }
.network-stats, .listening-controls .network-stats { border-color: var(--line); }
.network-stats b, .tip-card h3, .transport-state b { color: var(--text); }
.tip-card button { color: var(--p1); }
.page-footer .tiny-dot { background: var(--p1); }
input[type=range] { background: linear-gradient(to right, var(--p1) var(--value, 100%), #d3dbe3 var(--value, 100%)); }
input[type=range]::-webkit-slider-thumb { background: var(--p1); border-color: #fff; box-shadow: 0 0 0 1px #9cabb9; }
input[type=range]::-moz-range-thumb { background: var(--p1); border: 2px solid #fff; box-shadow: 0 0 0 1px #9cabb9; }
.switch { background: #e0e5ea; border-color: #b8c3ce; }
.switch i { background: #748696; }
.switch[aria-checked=true] { background: var(--p1); border-color: var(--p1); }
.switch[aria-checked=true] i { background: #fff; }
.inline-playback { background: #eef2f6; border-color: var(--line); }
.playback-heading .section-title, .source-summary { color: var(--text); }
.setting-caption, .settings-chevron, .record-details { color: var(--text-dim); }
.inline-recording { background: #f4f5f6; border-color: var(--line); }
.transport-bar { background: #fffffff2; border-color: var(--line); }
.transport-icon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--p1); }
.screen-stage { background: #eff2f5; border-color: var(--line); }
.screen-stage #screenPlaceholder, .screen-stage #screenPlaceholder svg { color: #657c91; }
.screen-stage #screenPlaceholder b { color: var(--text); }
.screen-stage video, .screen-area, .screen-area video { background: #101419; }

/* All room entries, invitations, prompts, and transient feedback. */
dialog { background: var(--panel); border-color: #c4ced8; box-shadow: 0 28px 100px #29323d30; }
dialog::backdrop, .modal-mask { background: #29323d66; }
.dialog-overline, dialog p, .room-entry-modes button { color: var(--text-dim); }
.room-entry-modes, .seg { background: #eef1f4; border-color: #d4dce3; }
.room-entry-modes button.active, .seg button.on { background: #fff; color: var(--p1); box-shadow: 0 1px 5px #29323d12, inset 0 0 0 1px #bdcbd8; }
.seg button:disabled.on { background: #e1e5e9; color: var(--text-faint); box-shadow: none; }
dialog .room-lifecycle, .help-note { background: #f1f3f5; border-color: var(--line); color: var(--text-dim); }
.help-steps li { color: var(--p1); }
.toast { background: #fff; color: var(--text); border-color: #c6d0da; box-shadow: 0 8px 28px #29323d18; }
.toast.error, .toast.err { background: var(--bad-soft); color: var(--bad); border-color: #dab0b0; }

/* HD voice room, including joined-room controls and members. */
.entry-wrap, .room-app { background: var(--bg); }
.entry { box-shadow: var(--shadow); }
.entry .sub, .entry .tip, .modal .hint { color: var(--text-dim); }
.room-chip { background: #f1f3f5; border-color: var(--line); }
.room-chip button { background: #e2e8ee; color: var(--p1); }
.tag, .tag.share { background: var(--accent-soft); color: var(--p1); border-color: var(--accent-line); }
.tag.relay { background: var(--warn-soft); color: var(--warn); border-color: #ddc89e; }
.tag.rec { background: var(--bad-soft); color: var(--bad); border-color: #dab0b0; }
.seat.empty { background: #eff1f2; border-color: #c4ced6; }
.seat .avatar, .member-row .avatar, .avatar { background: #e1e8ef !important; color: #4b627b !important; }
.seat .nm .you { color: var(--p1); }
.side .tabs button.on { color: var(--p1); border-bottom-color: var(--p1); background: #f4f7fa; }
.ctrl .ic { background: #edf1f5; border-color: #d5dde5; }
.ctrl.on .ic { background: var(--accent-soft); border-color: var(--accent-line); color: var(--p1); box-shadow: none; }
.ctrl.danger .ic { background: var(--bad-soft); border-color: #dab0b0; color: var(--bad); }
.ctrl.rec.on .ic { background: var(--bad); color: #fff; }
.conn-banner { background: var(--warn-soft); color: var(--warn); border-color: #ddc89e; }
.spin { border-color: #ddc89e; border-top-color: var(--warn); }

/* Earlier introduction route uses the same palette. */
.landing { background: var(--bg); }
.dseat, .feat .ic { background: #edf1f5; }
.tier.hot { border-color: var(--accent-line); box-shadow: 0 8px 32px #29323d0a; }
.tier .badge, .step .n { color: #fff; }