:root {
  --app-bg: #09090a;
  --app-glow: #131720;
  --app-header: #0d0d0e;
  --app-surface: #18181b;
  --app-surface-raised: #1d202a;
  --app-surface-muted: #101114;
  --app-text: #f7f7f8;
  --app-text-muted: #a7a8b1;
  --app-border: #2b2c32;
  --app-border-strong: #4778fa;
  --app-accent: #3b6ff5;
  --app-accent-soft: #1d2745;
  --app-button: #f5f5f6;
  --app-button-text: #19191d;
  --app-event: #192239;
  --app-event-border: #365796;
  --app-modal-backdrop: rgba(2, 3, 5, .72);
}

.app-shell.light-theme {
  --app-bg: #f6f8fc;
  --app-glow: #e5edff;
  --app-header: #ffffff;
  --app-surface: #ffffff;
  --app-surface-raised: #f8faff;
  --app-surface-muted: #f1f4fa;
  --app-text: #182033;
  --app-text-muted: #5f6980;
  --app-border: #dbe2ef;
  --app-border-strong: #6b8fff;
  --app-accent: #3568eb;
  --app-accent-soft: #eaf0ff;
  --app-button: #3568eb;
  --app-button-text: #ffffff;
  --app-event: #edf3ff;
  --app-event-border: #bed0ff;
  --app-modal-backdrop: rgba(35, 48, 76, .36);
}

.app-shell {
  color: var(--app-text);
  background: radial-gradient(circle at 49% 42%, var(--app-glow) 0, transparent 38%), var(--app-bg);
}

.app-shell .app-header { background: var(--app-header); border-color: var(--app-border); }
.app-shell.light-theme .app-logo { background: #fff; }
.app-shell .app-nav button, .app-shell .quiet-button, .app-shell .text-button { color: var(--app-text-muted); }
.app-shell .app-nav button:hover, .app-shell .app-nav button.active { background: var(--app-button); color: var(--app-button-text); }
.app-shell .header-cta, .app-shell .privacy-note button, .app-shell .full { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.app-shell .workspace-head p, .app-shell .home-hero p, .app-shell .empty-page p, .app-shell .agents-page p, .app-shell .sync-card p, .app-shell .privacy-note, .app-shell .event small, .app-shell .busy-list small, .app-shell .card-foot, .app-shell .agent-card span { color: var(--app-text-muted); }
.app-shell .stepper, .app-shell .provider-head, .app-shell .card-foot, .app-shell .event, .app-shell .direction-toggle { border-color: var(--app-border); }
.app-shell .stepper, .app-shell .step { color: var(--app-text-muted); }
.app-shell .step.active, .app-shell .step.active b { color: var(--app-text); border-color: var(--app-text); }
.app-shell .calendar-card, .app-shell .sync-card, .app-shell .agent-card, .app-shell .email-modal { background: var(--app-surface); border-color: var(--app-border); }
.app-shell .sync-card { background: linear-gradient(145deg, var(--app-surface-raised), var(--app-surface)); border-color: var(--app-border-strong); }
.app-shell .event, .app-shell .direction-toggle { background: var(--app-surface-muted); }
.app-shell .busy-list > div { background: var(--app-event); border-color: var(--app-event-border); color: var(--app-text); }
.app-shell .apple-busy > div { background: color-mix(in srgb, var(--app-event) 82%, #c28aff); border-color: color-mix(in srgb, var(--app-event-border) 78%, #9e5bcd); }
.app-shell .direction-toggle button { color: var(--app-text-muted); }
.app-shell .direction-toggle button.selected, .app-shell .preview-button, .app-shell .primary-button { background: var(--app-button); color: var(--app-button-text); }
.app-shell .sync-glyph, .app-shell .modal-icon { background: var(--app-accent-soft); color: var(--app-accent); }
.app-shell .privacy-note > span { background: var(--app-accent-soft); color: var(--app-accent); }
.app-shell .email-modal input { background: var(--app-surface-muted); border-color: var(--app-border); color: var(--app-text); }
.app-shell .modal-backdrop { background: var(--app-modal-backdrop); }

.app-shell.light-theme .privacy-note p b { color: var(--app-text); }
.app-shell.light-theme .sync-card ul { color: var(--app-text-muted); }
.app-shell.light-theme .sync-card li span { color: #239653; }

.theme-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.theme-switch:hover { color: var(--app-text); border-color: var(--app-border-strong); }
.theme-switch[aria-pressed="true"] { background: var(--app-accent-soft); color: var(--app-accent); }

.settings-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-text-muted);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.settings-button:hover { color: var(--app-text); border-color: var(--app-border-strong); }