/* The Flow Suite colour modes: one source of truth for every app on this domain.
   <html data-theme="light|dark|frappe"> is the single switch. Map your app's own variables to these --flow-* values.
   Light and dark follow the Lists palette. Dark is a deliberate navy, not the design system's graphite. Twilight uses the Catppuccin Frappé palette (internal key: frappe). */
:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --flow-page: #131922; --flow-sidebar: #171f2a; --flow-panel: #1b2431; --flow-raised: #222d3c; --flow-hover: #263242; --flow-border: #303c4e;
  --flow-text: #e7edf6; --flow-muted: #a4b1c3; --flow-subtle: #a4b1c3; --flow-accent: #86aaff; --flow-on-accent: #101722; --flow-link: #86aaff; --flow-danger: #ff8a80;
  --flow-accent-soft: #243550; --flow-mention: rgba(16, 200, 212, 0.14); --flow-mention-text: #5fe0e8; --flow-live: #7bc9a6; --flow-warn: #e8b85a;
  --flow-notify: #e41e3f; --flow-on-notify: #ffffff;
  --flow-presence-online: #4ade80; --flow-presence-away: #facc15; --flow-presence-offline: #8e9bad;
  --flow-c-purple-bg: #2a2d44; --flow-c-purple-pill: #49406a; --flow-c-purple-text: #e1d5f1; --flow-c-purple-dot: #c3aae2;
  --flow-c-yellow-bg: #313330; --flow-c-yellow-pill: #5c522e; --flow-c-yellow-text: #f1e4bf; --flow-c-yellow-dot: #e2c97f;
  --flow-c-blue-bg: #213146; --flow-c-blue-pill: #2e4b6f; --flow-c-blue-text: #caddf5; --flow-c-blue-dot: #95bceb;
  --flow-c-green-bg: #213439; --flow-c-green-pill: #2e5449; --flow-c-green-text: #cae5d5; --flow-c-green-dot: #95cbab;
  --flow-c-orange-bg: #323033; --flow-c-orange-pill: #614937; --flow-c-orange-text: #f5dcc6; --flow-c-orange-dot: #ebb98e;
  --flow-c-red-bg: #322c36; --flow-c-red-pill: #5f3c40; --flow-c-red-text: #f4d1ce; --flow-c-red-dot: #e8a39d;
  --flow-c-pink-bg: #312d3f; --flow-c-pink-pill: #5e3e5a; --flow-c-pink-text: #f2d3e3; --flow-c-pink-dot: #e5a6c8;
  --flow-c-grey-bg: #28323f; --flow-c-grey-pill: #434d5b; --flow-c-grey-text: #dcdfe4; --flow-c-grey-dot: #b9bfc9;
  --flow-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
:root[data-theme='light'] {
  color-scheme: light;
  --flow-page: #f7f8fa; --flow-sidebar: #f0f2f5; --flow-panel: #ffffff; --flow-raised: #ffffff; --flow-hover: #e9ecf1; --flow-border: #e3e7ed;
  --flow-text: #202b3b; --flow-muted: #5c6879; --flow-subtle: #5c6879; --flow-accent: #3166db; --flow-on-accent: #ffffff; --flow-link: #2a5bc9; --flow-danger: #b3432f;
  --flow-accent-soft: #e9efff; --flow-mention: rgba(16, 200, 212, 0.14); --flow-mention-text: #0a6168; --flow-live: #32765e; --flow-warn: #80590a;
  --flow-notify: #e41e3f; --flow-on-notify: #ffffff;
  --flow-presence-online: #16803f; --flow-presence-away: #a87400; --flow-presence-offline: #7c8796;
  --flow-c-purple-bg: #f5f1fa; --flow-c-purple-pill: #e3d8f2; --flow-c-purple-text: #3b2b4f; --flow-c-purple-dot: #7c5ba6;
  --flow-c-yellow-bg: #faf6ea; --flow-c-yellow-pill: #f2e6c3; --flow-c-yellow-text: #4f3f10; --flow-c-yellow-dot: #a68422;
  --flow-c-blue-bg: #edf4fc; --flow-c-blue-pill: #cee0f5; --flow-c-blue-text: #1e3654; --flow-c-blue-dot: #3f72b1;
  --flow-c-green-bg: #edf6f1; --flow-c-green-pill: #cee7d8; --flow-c-green-text: #1e402c; --flow-c-green-dot: #3f865c;
  --flow-c-orange-bg: #fcf3ec; --flow-c-orange-pill: #f5deca; --flow-c-orange-text: #543419; --flow-c-orange-dot: #b16e35;
  --flow-c-red-bg: #fbf0ef; --flow-c-red-pill: #f4d4d1; --flow-c-red-text: #522723; --flow-c-red-dot: #ae524a;
  --flow-c-pink-bg: #fbf0f6; --flow-c-pink-pill: #f3d6e5; --flow-c-pink-text: #51293e; --flow-c-pink-dot: #aa5682;
  --flow-c-grey-bg: #f3f4f6; --flow-c-grey-pill: #dfe1e6; --flow-c-grey-text: #35393f; --flow-c-grey-dot: #6f7784;
  --flow-shadow: 0 16px 48px rgba(23, 37, 59, 0.14);
}
:root[data-theme='frappe'] {
  color-scheme: dark;
  --flow-page: #303446; --flow-sidebar: #292c3c; --flow-panel: #292c3c; --flow-raised: #414559; --flow-hover: #414559; --flow-border: #51576d;
  --flow-text: #c6d0f5; --flow-muted: #b5bfe2; --flow-subtle: #a5adce; --flow-accent: #8caaee; --flow-on-accent: #232634; --flow-link: #a3b9f2; --flow-danger: #f29c9e;
  --flow-accent-soft: rgba(140, 170, 238, 0.2); --flow-mention: rgba(129, 200, 190, 0.18); --flow-mention-text: #a0e0d6; --flow-live: #81c8be; --flow-warn: #e5c890;
  --flow-notify: #e5243f; --flow-on-notify: #ffffff;
  --flow-presence-online: #a6d189; --flow-presence-away: #e5c890; --flow-presence-offline: #a5adce;
  --flow-c-purple-bg: #37344e; --flow-c-purple-pill: #524571; --flow-c-purple-text: #e1d5f1; --flow-c-purple-dot: #c3aae2;
  --flow-c-yellow-bg: #3d3b3a; --flow-c-yellow-pill: #655836; --flow-c-yellow-text: #f1e4bf; --flow-c-yellow-dot: #e2c97f;
  --flow-c-blue-bg: #2e384f; --flow-c-blue-pill: #375076; --flow-c-blue-text: #caddf5; --flow-c-blue-dot: #95bceb;
  --flow-c-green-bg: #2e3b43; --flow-c-green-pill: #375950; --flow-c-green-text: #cae5d5; --flow-c-green-dot: #95cbab;
  --flow-c-orange-bg: #3f373d; --flow-c-orange-pill: #6a4e3e; --flow-c-orange-text: #f5dcc6; --flow-c-orange-dot: #ebb98e;
  --flow-c-red-bg: #3e3340; --flow-c-red-pill: #684148; --flow-c-red-text: #f4d1ce; --flow-c-red-dot: #e8a39d;
  --flow-c-pink-bg: #3e3448; --flow-c-pink-pill: #674361; --flow-c-pink-text: #f2d3e3; --flow-c-pink-dot: #e5a6c8;
  --flow-c-grey-bg: #353949; --flow-c-grey-pill: #4c5262; --flow-c-grey-text: #dcdfe4; --flow-c-grey-dot: #b9bfc9;
  --flow-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}