/* Shared surface and interaction colours. Keep the established app layout. */
:root {
  --muted: #656972;
  --teal: #107571;
  --primary-ink: #fff;
  --primary-hover: #095f5c;
  --card-line: #dfe3e8;
  --hover: #e5ecee;
  --active: #d9e7e8;
  --active-ink: #175a61;
  --focus: #107571;
  --notice-ink: #3d6e70;
  --notice-line: #b7d9d5;
  --warn-bg: #fbf3e9;
  --warn-ink: #81633c;
  --warn-line: #d9bc94;
  --event-bg: #d2ebe8;
  --event-ink: #276367;
  --bar: #83b8b1;
  --chart-1: #107571;
  --chart-2: #4779aa;
  --chart-3: #9272ac;
  --chart-4: #a17637;
  --chart-5: #b45e6d;
}
:root[data-theme="dark"] {
  --bg: #151b22;
  --side: #19222b;
  --card: #202a34;
  --ink: #edf3f7;
  --muted: #abb9c6;
  --line: #43515e;
  --card-line: #34424e;
  --teal: #7bd8cd;
  --soft: #243d40;
  --red: #ff9b9f;
  --primary-ink: #102d2c;
  --primary-hover: #a0e9dd;
  --hover: #2b3945;
  --active: #2a454a;
  --active-ink: #a9ebe0;
  --focus: #9ae8dc;
  --notice-ink: #b8e2dc;
  --notice-line: #436964;
  --warn-bg: #3b3225;
  --warn-ink: #f0cf9c;
  --warn-line: #80653e;
  --event-bg: #2d4b50;
  --event-ink: #c4eee7;
  --bar: #4e8e89;
  --chart-1: #7bd8cd;
  --chart-2: #8bbcf5;
  --chart-3: #c4a6eb;
  --chart-4: #e6bd7b;
  --chart-5: #ed9dab;
  --shadow: 0 8px 28px #00000020;
}
html, body { background: var(--bg); color: var(--ink); }
body { accent-color: var(--teal); }
button:hover { background: var(--hover); border-color: var(--line); }
button.primary, .tab-strip button.active {
  background: var(--teal); color: var(--primary-ink); border-color: var(--teal);
}
button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.link:hover { background: none; text-decoration: underline; }
:focus-visible { outline-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.native-shell .card { border-color: var(--card-line); }
.nav button:hover { background: var(--hover); }
.nav button.active, .native-shell .nav button.active {
  background: var(--active); color: var(--active-ink);
}
.native-plan:hover { background: var(--active); }
.plan-card, .tag, .email-provider, #toast { border-color: var(--notice-line); }
.demo-banner { background: var(--soft); color: var(--notice-ink); }
.notice { background: var(--soft); color: var(--notice-ink); border-color: var(--notice-line); }
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.cal-event { background: var(--event-bg); color: var(--event-ink); }
.bars div { background: var(--bar); }
.bars div:last-child { background: var(--teal); }
.skip { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .auth-brand { background: linear-gradient(135deg, #102b34, #164842); }
:root[data-theme="dark"] .apple-provider,
:root[data-theme="dark"] .apple-provider:hover:disabled { background: #edf3f7; color: #151b22; border-color: #edf3f7; }
:root[data-theme="dark"] .google-provider:disabled { border-color: var(--line); }
:root[data-theme="dark"] .provider-button small { opacity: 1; }
:root[data-theme="dark"] .brand-stack { filter: brightness(1.8) saturate(.7); }
:root[data-theme="dark"] dialog { box-shadow: 0 25px 100px #0009; }
:root[data-theme="dark"] dialog::backdrop { background: #080e16b3; }
::selection { background: var(--teal); color: var(--primary-ink); }