/* Dispensed theme: palette pulled from the logo (coral, butter, sage,
   periwinkle, lilac on cream, with an ink outline). Prism structure stays;
   the logo supplies the colour. */
:root {
  --ink: #2f2e3b;
  --coral: #de7e58; --butter: #f2d371; --sage: #a2c89e; --periwinkle: #bac2f4; --lilac: #cda3fa; --cream: #faf0cb;

  --bg: #fcfaf4;
  --fg: var(--ink);
  --surface-soft: #f7f3ea;
  --border: #ebe5d8;
  --dot: #e9e1cf;
  --accent: #7a52c7;
  --accent-soft: #f3ecfe;

  /* Status colours: the logo's coral, butter and sage, deepened for legibility. */
  --red: #b0462a; --red-soft: #fbe8df;
  --orange: #8f6200; --orange-soft: #fbf1d4;
  --green: #3f7a3c; --green-soft: #e7f1e5;

  --pill-bg: var(--ink);
  --logo-h: 30px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14131a; --fg: #f4f1ea; --surface: #1c1b24; --surface-soft: #24232e; --border: #302e3b; --dot: #25232f;
    --accent: #b99af2; --accent-soft: #2a2340;
    --red: #e8886a; --red-soft: #3a2119; --orange: #f2d371; --orange-soft: #372d14; --green: #a2c89e; --green-soft: #1d2c1c;
    --pill-bg: var(--cream); --pill-fg: var(--ink);
  }
}
:root[data-theme="dark"] {
  --bg: #14131a; --fg: #f4f1ea; --surface: #1c1b24; --surface-soft: #24232e; --border: #302e3b; --dot: #25232f;
  --accent: #b99af2; --accent-soft: #2a2340;
  --red: #e8886a; --red-soft: #3a2119; --orange: #f2d371; --orange-soft: #372d14; --green: #a2c89e; --green-soft: #1d2c1c;
  --pill-bg: var(--cream); --pill-fg: var(--ink);
}

/* A thin stripe of the logo's colours along the top of the app. */
.header { position: relative; }
.header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--coral) 0 20%, var(--butter) 20% 40%, var(--sage) 40% 60%, var(--periwinkle) 60% 80%, var(--lilac) 80% 100%);
}
.about { background: var(--cream); border-color: #efe2b6; color: #6b5f3f; }
.about b { color: var(--ink); }
:root[data-theme="dark"] .about { background: #221f18; border-color: #3a3322; color: #bfb392; }
:root[data-theme="dark"] .about b { color: var(--cream); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about { background: #221f18; border-color: #3a3322; color: #bfb392; }
  :root:not([data-theme="light"]) .about b { color: var(--cream); }
}