/* Unrote design system, style "Depth" (chosen 2026-10-09, design/styles/v2, variant 2): deep navy is the brand,
   vivid blue only for actions, the active item and focus; cool neutrals for everything else; red only for errors and
   deleting, green only for success. Light is the default, dark mirrors it and follows the system unless the page sets
   data-theme="light" or "dark" on <html>. One source for every app and console: design/system/sync.py copies it. */
:root {
  color-scheme: light;
  /* surfaces and text */
  --u-bg: #ffffff;
  --u-surface: #ffffff;
  --u-surface-2: #f3f5f9;
  --u-sunken: #e9edf3;
  --u-fg: #101c30;
  --u-muted: #55627a;
  --u-line: #dde2ea;
  --u-line-2: #c3cbd8;
  /* the action colour */
  --u-accent: #2a62f5;
  --u-accent-hover: #1f52dd;
  --u-accent-fg: #ffffff;
  --u-soft: #e8eefc;
  --u-soft-fg: #1b46c4;
  --u-focus: 0 0 0 3px rgba(42, 98, 245, .28);
  /* the brand: the side column, the window's title bar, the phone's top bar */
  --u-navy: #0f2240;
  --u-brand-bg: #0f2240;
  --u-brand-chrome: #0b1a33;
  --u-brand-fg: #e3e9f3;
  --u-brand-muted: #a3b3cc;
  --u-brand-line: #22375a;
  --u-brand-on: #1b3361;
  --u-brand-on-fg: #ffffff;
  --u-rail: #6ea2ff;
  /* the person's own message */
  --u-user: #edf1f7;
  /* states */
  --u-good: #12784a;
  --u-good-soft: #e3f4ec;
  --u-bad: #c2362b;
  --u-bad-soft: #fcebea;
  --u-bad-line: #f1c2bd;
  /* shape and depth */
  --u-radius: 4px;
  --u-radius-lg: 6px;
  --u-radius-xl: 8px;
  --u-shadow-1: 0 1px 2px rgba(16, 28, 48, .06);
  --u-shadow-pop: 0 16px 40px rgba(16, 28, 48, .18);
  /* type: Plex for text, Plex Mono for times, statuses and field labels; other scripts take the system font */
  --u-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --u-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --u-fs: 14px;
  --u-fs-sm: 12.5px;
  --u-fs-xs: 11.5px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --u-bg: #0c1526;
    --u-surface: #111d31;
    --u-surface-2: #15233a;
    --u-sunken: #0a1220;
    --u-fg: #e3e9f3;
    --u-muted: #94a3bb;
    --u-line: #1f2d45;
    --u-line-2: #2e3f5c;
    --u-accent: #5b9bff;
    --u-accent-hover: #78aeff;
    --u-accent-fg: #06101f;
    --u-soft: #16294a;
    --u-soft-fg: #9cc2ff;
    --u-focus: 0 0 0 3px rgba(91, 155, 255, .35);
    --u-navy: #9cb6e3;
    --u-brand-bg: #08111f;
    --u-brand-chrome: #060d1a;
    --u-brand-fg: #e3e9f3;
    --u-brand-muted: #94a3bb;
    --u-brand-line: #1a2740;
    --u-brand-on: #15274a;
    --u-brand-on-fg: #ffffff;
    --u-rail: #5b9bff;
    --u-user: #16243b;
    --u-good: #4ade80;
    --u-good-soft: rgba(74, 222, 128, .12);
    --u-bad: #ff8a80;
    --u-bad-soft: rgba(255, 138, 128, .12);
    --u-bad-line: rgba(255, 138, 128, .35);
    --u-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --u-shadow-pop: 0 16px 40px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --u-bg: #0c1526;
  --u-surface: #111d31;
  --u-surface-2: #15233a;
  --u-sunken: #0a1220;
  --u-fg: #e3e9f3;
  --u-muted: #94a3bb;
  --u-line: #1f2d45;
  --u-line-2: #2e3f5c;
  --u-accent: #5b9bff;
  --u-accent-hover: #78aeff;
  --u-accent-fg: #06101f;
  --u-soft: #16294a;
  --u-soft-fg: #9cc2ff;
  --u-focus: 0 0 0 3px rgba(91, 155, 255, .35);
  --u-navy: #9cb6e3;
  --u-brand-bg: #08111f;
  --u-brand-chrome: #060d1a;
  --u-brand-fg: #e3e9f3;
  --u-brand-muted: #94a3bb;
  --u-brand-line: #1a2740;
  --u-brand-on: #15274a;
  --u-brand-on-fg: #ffffff;
  --u-rail: #5b9bff;
  --u-user: #16243b;
  --u-good: #4ade80;
  --u-good-soft: rgba(74, 222, 128, .12);
  --u-bad: #ff8a80;
  --u-bad-soft: rgba(255, 138, 128, .12);
  --u-bad-line: rgba(255, 138, 128, .35);
  --u-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --u-shadow-pop: 0 16px 40px rgba(0, 0, 0, .55);
}