/* Theme surfaces are independent of event-category colors. No color filters. */
:root {
  --surface: #fff;
  --canvas: #fff;
  --card-ink: #10194b;
  --card-muted: #304777;
  --control-bg: #f5f8fc;
  --selection-bg: var(--blue-bg);
  --selection-ink: #155fbd;
  --action-fill: #287be6;
  --action-hover: #206bce;
}
:root[data-theme="bright"], :root[data-theme="dark"] {
  --blue: #2476ed;
  --blue-bg: #c9e1ff;
  --blue-edge: #82b5ff;
  --blue-icon: #095ed4;
  --green: #139f6a;
  --green-bg: #bef0d6;
  --green-edge: #65d59b;
  --green-icon: #085d39;
  --coral: #f05272;
  --coral-bg: #ffd3dd;
  --coral-edge: #ff91a9;
  --coral-icon: #c3224b;
  --yellow: #f5d82e;
  --yellow-bg: #fff2a6;
  --yellow-edge: #edd044;
  --yellow-icon: #25343a;
  --violet: #8754e3;
  --violet-bg: #e4d6ff;
  --violet-edge: #b591f4;
  --violet-icon: #6231b5;
  --selection-bg: #e5efff;
  --line: #e0e8f3;
}
:root[data-theme="dark"] {
  --canvas: #101b32;
  --surface: #16243e;
  --ink: #edf3ff;
  --muted: #a4b6d3;
  --line: #30415e;
  --paper: #101b32;
  --control-bg: #1e3050;
  --selection-bg: #25446d;
  --selection-ink: #b8d7ff;
  --blue: #87b8ff;
  --green: #54d5a0;
  --coral: #ff8aa4;
  --violet: #bc9aff;
}

/* Settings: the preview colors stay true to each option in every theme. */
.theme-settings { border: 0; padding: 0; margin: 0 0 25px; min-width: 0; }
.theme-settings legend { font-size: 16px; font-weight: 700; padding: 0; margin-bottom: 6px; }
.theme-settings > p { font-size: 12px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
.theme-options { display: grid; gap: 8px; }
.theme-option { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; min-width: 0; background: var(--surface); transition: border-color .16s, background .16s; }
.theme-option:has(input:checked) { border-color: var(--blue); background: var(--selection-bg); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.theme-option input { flex: none; width: 18px; height: 18px; margin: 0 0 0 auto; accent-color: var(--action-fill); }
.theme-option-copy { min-width: 0; flex: 1; }
.theme-option-copy strong { display: block; font-size: 14px; }
.theme-option-copy small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.theme-swatch { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; width: 65px; height: 45px; padding: 7px; flex: none; border: 1px solid #dce5f0; border-radius: 8px; background: #fff; }
.theme-swatch i { height: 25px; border: 1px solid #adcfff; border-radius: 3px; background: #e7f1ff; }
.theme-swatch i:nth-child(2) { height: 18px; background: #e7f9ef; border-color: #a6e4c4; }
.theme-swatch i:nth-child(3) { height: 23px; background: #fffde9; border-color: #f0df94; }
.theme-swatch[data-preview="dark"] { background: #101b32; border-color: #30415e; }
.theme-swatch:not([data-preview="soft"]) i { background: #c9e1ff; border-color: #82b5ff; }
.theme-swatch:not([data-preview="soft"]) i:nth-child(2) { background: #bef0d6; border-color: #65d59b; }
.theme-swatch:not([data-preview="soft"]) i:nth-child(3) { background: #fff2a6; border-color: #edd044; }
.settings-role-title { font-size: 16px; margin-bottom: 8px; }
.theme-customizer { position:relative; display:grid; gap:18px; margin:0 0 25px; padding:18px; overflow:hidden; border:1px solid color-mix(in srgb,var(--blue) 32%,var(--line)); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 8%,var(--surface)),var(--surface) 58%); }
.theme-customizer::after { content:''; position:absolute; width:130px; height:130px; right:-52px; top:-68px; border-radius:50%; background:color-mix(in srgb,var(--violet) 13%,transparent); pointer-events:none; }
.theme-customizer-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.theme-customizer h3 { margin:5px 0 0; font-size:17px; }
.theme-customizer > p { margin:-9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.premium-label { display:inline-flex; align-items:center; min-height:20px; padding:2px 8px; border-radius:999px; background:var(--yellow-bg); color:var(--yellow-icon); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.theme-custom-toggle { display:flex; align-items:center; gap:9px; min-height:44px; color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; }
.theme-custom-toggle input { width:20px; height:20px; margin:0; accent-color:var(--action-fill); }
.theme-color-section { display:grid; gap:9px; }
.theme-color-section > strong { font-size:12px; }
.theme-color-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.theme-color-grid.card-colors { grid-template-columns:repeat(5,minmax(0,1fr)); }
.theme-color-control { display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:1px 8px; min-width:0; min-height:53px; padding:7px; border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; }
.theme-color-control input { grid-row:1/-1; width:30px; height:38px; padding:0; overflow:hidden; border:0; border-radius:8px; background:none; cursor:pointer; }
.theme-color-control input::-webkit-color-swatch-wrapper { padding:0; }
.theme-color-control input::-webkit-color-swatch { border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:8px; }
.theme-color-control span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.theme-color-control code { color:var(--muted); font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.theme-reset { justify-self:start; min-height:40px; padding:7px 0; color:var(--blue); font-size:12px; font-weight:700; }
:root[data-custom-theme="false"] .theme-color-section { opacity:.62; }
@media(max-width:560px){.theme-color-grid,.theme-color-grid.card-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-customizer{padding:15px}.theme-customizer-head{align-items:flex-start}.theme-custom-toggle{min-height:36px}.theme-color-control{min-height:56px}}

/* Preserve the existing soft theme. These mappings apply to the new modes. */
:root:is([data-theme="bright"], [data-theme="dark"], [data-custom-theme="true"]) {
  & body { background: var(--canvas); }
  & .avatar { background: #7561ba; }
  & .avatar.parent { background: #2879d8; }
  & .avatar.family { background: #397e91; }
  & .app-header, & .mobile-date-header, & .mobile-nav,
  & .week-head, & .rail-card, & .list-card, & .editor,
  & .editor-head, & .picker-panel, & .icon-picker-list,
  & .secondary-button, & .calendar-zoom, & .calendar-zoom select,
  & .repeat-heading select, & .field input, & .field select,
  & .field textarea, & .icon-picker-trigger, & .skip-link {
    background: var(--surface);
  }
  & .field input, & .field select, & .field textarea, & .icon-picker-trigger { border-color: var(--line); }
  & .roles button { background: var(--control-bg); }
  & .roles button.active, & .mobile-role-choices .active,
  & .week-head .selected > span, & .date-cell.selected,
  & .mini-grid button:hover, & .calendar-zoom button:hover:not(:disabled),
  & .calendar-zoom .zoom-detail.active, & .picker-input > button:hover,
  & .picker-input > button[aria-expanded=true], & .picker-days button:hover:not(:disabled),
  & .picker-month-head button:hover:not(:disabled), & .picker-days button[aria-pressed=true],
  & .repeat-presets button[aria-pressed=true], & .repeat-weekdays button[aria-pressed=true],
  & .time-panel button[aria-pressed=true], & .icon-picker-option[aria-selected=true],
  & .clock-wheel-frame::before { background: var(--selection-bg); }
  & .mobile-role-choices .active { border-color: var(--blue); }
  & .picker-days button[aria-pressed=true], & .repeat-presets button[aria-pressed=true],
  & .repeat-weekdays button[aria-pressed=true], & .time-panel button[aria-pressed=true],
  & .icon-picker-option[aria-selected=true], & .icon-picker-option[aria-selected=true] .icon-picker-preview,
  & .time-panel .clock-wheel button.selected { color: var(--selection-ink); }
  & .primary-button { background: var(--action-fill); border-color: var(--action-fill); color: var(--action-ink,#fff); }
  & .primary-button:hover { background: var(--action-hover); }
  & .event-card, & .event-preview, & .event-detail-banner { color: var(--card-foreground,var(--card-ink)); }
  & .event-time, & .event-card.done .event-title, & .event-detail-banner small,
  & .event-preview-date, & .event-preview-owner { color: var(--card-secondary,var(--card-muted)); }
  & .clock-wheel-frame::after { background: linear-gradient(to bottom, var(--surface), transparent 30%, transparent 70%, var(--surface)); }
}

:root[data-theme="dark"] {
  & ::selection { background: #355b89; color: #fff; }
  & .week-scroll { background: var(--canvas); scrollbar-color: #476080 transparent; }
  & .day-column.saturday, & .day-column.sunday { background-color: #132039; }
  & .week-calendar .day-column {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), var(--line) calc(var(--hour) - 1px), var(--line) var(--hour)), repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) / var(--time-divisions, 1) - 1px), #23324c calc(var(--hour) / var(--time-divisions, 1) - 1px), #23324c calc(var(--hour) / var(--time-divisions, 1)));
  }
  & .week-head .saturday > span, & .date-cell.saturday { background: #1b403c; }
  & .week-head .sunday > span, & .date-cell.sunday { background: #432b44; }
  & .date-cell { background: var(--surface); border-color: var(--line); }
  & .date-cell.selected { background: var(--selection-bg); border-color: #668fca; }
  & .date-cell.selected strong, & .mini-grid button.selected { background: var(--action-fill); color: #fff; }
  & .mini-grid button.week-selected:not(.selected), & .icon-button:hover,
  & .secondary-button:hover, & .status-label, & .role-note,
  & .repeat-presets button, & .clock-quick button,
  & .picker-days .weekend:not([aria-pressed=true]) { background: var(--control-bg); }
  & .repeat-presets button[aria-pressed=true], & .time-panel button[aria-pressed=true],
  & .repeat-presets button[aria-pressed=mixed], & .repeat-weekdays button[aria-pressed=mixed],
  & .repeat-summary, & .icon-picker-trigger[aria-expanded=true], & .icon-picker-option:hover {
    background: var(--selection-bg); color: var(--selection-ink);
  }
  & .brand small, & .mini-grid .weekday, & .mini-grid button.muted,
  & .filter-row:has(input:not(:checked)), & .rail-date small, & .todo-row.checked span,
  & .request-person small, & .role-note, & .date-cell span, & .agenda-item > time,
  & .mobile-nav button, & .picker-weekdays, & .picker-days .outside,
  & .repeat-presets button, & .repeat-scope, & .repeat-help, & .clock-column > span,
  & .time-panel .clock-wheel button, & .clock-quick button, & .clock-bottom > span,
  & .text-limit-hint, & .time-axis .minute-label, & .time-axis .hour-label { color: var(--muted); }
  & .mobile-nav button.active, & .date-cell.selected span { color: var(--blue); }
  & .mini-grid button.selected:hover { background: var(--action-fill); }
  & .mobile-nav button[data-open=create] { color: var(--ink); }
  & .picker-days button[aria-pressed=true], & .repeat-presets button[aria-pressed=true],
  & .repeat-presets button[aria-pressed=mixed], & .time-panel button[aria-pressed=true],
  & .time-panel .clock-wheel button.selected, & .text-limit-hint.at-limit { color: var(--selection-ink); }
  & .field input::placeholder, & .field textarea::placeholder { color: #93a5c1; opacity: 1; }
  & .field input:focus, & .field select:focus, & .field textarea:focus { border-color: var(--blue); }
  & .time-axis .minute-label::after { background: #526987; }
  & .time-axis .hour-label::after { background: #6d89b2; }
  & .time-axis[data-minute-ticks="true"]::after { background: repeating-linear-gradient(to bottom, #405575 0, #405575 1px, transparent 1px, transparent calc(var(--hour) / 60)); }
  & .day-column .slot-hint, & .day-column .drop-preview,
  & .agenda-drop, & .date-cell.drop-target { background: #203e65; border-color: #87b8ff; color: #d6e8ff; }
  & .mobile-date-header { border-color: var(--line); }
  & .notification.has-news:after { border-color: var(--surface); }
  & .progress-track { background: #2b3b57; }
  & .goal-dot { border-color: #667e9d; }
  & .goal-dot.complete { background: #18885c; border-color: #45bf8e; }
  & .goal-summary .icon { color: var(--green); }
  & .danger-button { background: #432539; border-color: #92516a; color: #ffadc0; }
  & .form-error, & .text-limit-hint.is-error { color: #ffadc0; }
  & .field [data-text-limit][aria-invalid=true] { border-color: #ff8aa4; }
  & .editor { box-shadow: 0 24px 80px #0006; }
  & .editor::backdrop { background: #060e20a6; }
  & .drag-help, & .toast { background: #263d60; border-color: #526e95; color: #fff; }
  & .event-card.drag-ghost { box-shadow: 0 16px 36px #0007, 0 3px 10px #0004; }
  & .event-preview, & .icon-picker-list { box-shadow: 0 8px 28px #0005; }
}
@media (prefers-reduced-motion: reduce) { .theme-option { transition: none; } }