/* Single source for the approved flat palette. Pale surfaces are separate
   from category marks and the stronger, legible icon strokes. */
:root {
  --ink: #10194b;
  --muted: #7386a9;
  --line: #e5ebf4;
  --paper: #ffffff;
  --blue: #287be6;
  --blue-bg: #e7f1ff;
  --blue-edge: #adcfff;
  --blue-icon: #1266e9;
  --green: #24a46e;
  --green-bg: #e7f9ef;
  --green-edge: #a6e4c4;
  --green-icon: #14613b;
  --coral: #ed6472;
  --coral-bg: #fff0f2;
  --coral-edge: #ffb4be;
  --coral-icon: #e94050;
  --yellow: #f1d344;
  --yellow-bg: #fffde9;
  --yellow-edge: #f0df94;
  --yellow-icon: #25343a;
  --violet: #9864df;
  --violet-bg: #f2edff;
  --violet-edge: #d2bbff;
  --violet-icon: #7750ce;
}
.blue { --tone: var(--blue); --wash: var(--card-blue-bg, var(--blue-bg)); --edge: var(--card-blue-edge, var(--blue-edge)); --icon-tone: var(--card-blue-ink, var(--blue-icon)); --card-foreground:var(--card-blue-ink,var(--card-ink,var(--ink))); --card-secondary:var(--card-blue-muted,var(--card-muted,var(--muted))); }
.green { --tone: var(--green); --wash: var(--card-green-bg, var(--green-bg)); --edge: var(--card-green-edge, var(--green-edge)); --icon-tone: var(--card-green-ink, var(--green-icon)); --card-foreground:var(--card-green-ink,var(--card-ink,var(--ink))); --card-secondary:var(--card-green-muted,var(--card-muted,var(--muted))); }
.coral { --tone: var(--coral); --wash: var(--card-coral-bg, var(--coral-bg)); --edge: var(--card-coral-edge, var(--coral-edge)); --icon-tone: var(--card-coral-ink, var(--coral-icon)); --card-foreground:var(--card-coral-ink,var(--card-ink,var(--ink))); --card-secondary:var(--card-coral-muted,var(--card-muted,var(--muted))); }
.yellow { --tone: var(--yellow); --wash: var(--card-yellow-bg, var(--yellow-bg)); --edge: var(--card-yellow-edge, var(--yellow-edge)); --icon-tone: var(--card-yellow-ink, var(--yellow-icon)); --card-foreground:var(--card-yellow-ink,var(--card-ink,var(--ink))); --card-secondary:var(--card-yellow-muted,var(--card-muted,var(--muted))); }
.violet { --tone: var(--violet); --wash: var(--card-violet-bg, var(--violet-bg)); --edge: var(--card-violet-edge, var(--violet-edge)); --icon-tone: var(--card-violet-ink, var(--violet-icon)); --card-foreground:var(--card-violet-ink,var(--card-ink,var(--ink))); --card-secondary:var(--card-violet-muted,var(--card-muted,var(--muted))); }
.event-icon, .event-detail-banner > .icon { color: var(--icon-tone, var(--tone)); }
.event-time { color: var(--card-secondary, #304777); }
.filter-row input { accent-color: var(--tone); }
.desktop-nav button.active .icon, .mobile-nav button.active { color: var(--blue); }
.desktop-nav button.active:after { background: var(--blue); }
.roles button.active { background: var(--blue-bg); border-color: var(--blue-edge); }
.avatar { background: #927b6a; }
.avatar.parent { background: #387fd1; }
.notification.has-news:after, .badge { background: var(--coral); }
.week-head .selected > span { background: #e0edff; }
.week-head .saturday > span, .date-cell.saturday { background: var(--green-bg); }
.week-head .sunday > span, .date-cell.sunday { background: var(--coral-bg); }
.date-cell.selected { background: var(--blue-bg); border-color: var(--blue-edge); }
.date-cell.selected strong { background: var(--blue); }
.sun { color: var(--yellow); }
.mobile-nav .add-icon { color: var(--yellow); border-color: var(--yellow-edge); }
.todo-row input { accent-color: var(--green); }
.request-actions button { color: var(--green-icon); background: var(--green-bg); border-color: var(--green-edge); }
.request-actions button.decline { color: var(--coral-icon); background: var(--coral-bg); border-color: var(--coral-edge); }
.goal-summary .icon { color: var(--green-icon); }
.rail-card.goal-card .rail-heading h2 > .icon { color: var(--coral); }
.progress-track > span, .goal-dot.complete { background: var(--green); border-color: var(--green); }