/* SpaceBooks visual language, vendored into Space Chat.
   There is no shared UI package. These tokens, the navy accent, and the
   glass pane values match the SpaceBooks frontend redesign.
   Source: the sandbox stylesheet (foundation PRs spacebooks #406–#409,
   reskin #411). Dark glass fills are the dark-surface companions of the
   light glass tokens on that stylesheet, so frosted panels stay readable
   when the system theme is dark. */

:root {
  color-scheme: light;
  --sbx-bg: #f6f6f5;
  --sbx-surface: #fff;
  --sbx-surface-2: #fbfbfa;
  --sbx-sunken: #efefed;
  --sbx-sunken-2: #ececea;
  --sbx-ink: #141414;
  --sbx-ink-2: #4a4a47;
  --sbx-mute: #6b6b68;
  --sbx-faint: #9a9a94;
  --sbx-line: #e8e8e5;
  --sbx-line-strong: #d4d4cf;
  --sbx-scrim: #1414146b;
  --sbx-primary: #141414;
  --sbx-primary-hover: #2b2b2a;
  --sbx-primary-press: #000;
  --sbx-on-primary: #fff;
  --sbx-brand-chip: #141414;
  --sbx-green: #17803d;
  --sbx-red: #c92a2a;
  --sbx-blue: #2563eb;
  --sbx-amber: #d99a00;
  --sbx-purple: #7048e8;
  --sbx-green-soft: #e7f6ee;
  --sbx-red-soft: #fdf1f1;
  --sbx-blue-soft: #e8f0ff;
  --sbx-amber-soft: #fff4d6;
  --sbx-purple-soft: #f0eafd;
  --sbx-amber-ink: #8a6a00;
  --sbx-red-border: #f0cfcf;
  --sbx-red-border-hover: #e6a8a8;
  --sbx-red-press: #b02424;
  --sbx-grad-mint: radial-gradient(120% 120% at 20% 0%, #d9f3e6 0, #fff 62%);
  --sbx-grad-peach: radial-gradient(110% 110% at 90% 0%, #ffe1d2 0, #fff 60%);
  --sbx-grad-aqua: radial-gradient(120% 120% at 50% 100%, #cdeee9 0, #e9f6d9 38%, #fff 75%);
  --sbx-grad-lilac: radial-gradient(110% 110% at 10% 0%, #e6dcff 0, #fff 62%);
  --sbx-grad-sun: radial-gradient(110% 110% at 100% 0%, #ffe9a8 0, #fff 62%);
  --sbx-grad-avatar-1: linear-gradient(135deg, #f6c9a6, #9bd7c4);
  --sbx-grad-avatar-2: linear-gradient(135deg, #d6c9ff, #bfd8ff);
  --sbx-grad-avatar-3: linear-gradient(135deg, #ffd9c4, #f8b8c8);
  --sbx-grad-avatar-4: linear-gradient(135deg, #cdeee9, #e9f6d9);
  --sbx-grad-avatar-5: linear-gradient(135deg, #ffe9a8, #ffc9a0);
  --sbx-r-xs: 7px;
  --sbx-r-sm: 10px;
  --sbx-r-md: 14px;
  --sbx-r-lg: 20px;
  --sbx-r-xl: 28px;
  --sbx-r-pill: 999px;
  --sbx-sh-1: 0 1px 2px #1414140a, 0 6px 20px #1414140d;
  --sbx-sh-2: 0 2px 4px #1414140d, 0 14px 34px #14141417;
  --sbx-sh-modal: 0 4px 10px #14141414, 0 30px 70px #14141438;
  --sbx-sh-btn: 0 1px 2px #0003, 0 8px 18px #00000024;
  --sbx-sh-btn-hover: 0 2px 4px #0003, 0 12px 24px #0003;
  --sbx-focus: 0 0 0 3px #2563eb59;
  --sbx-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sbx-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "JetBrains Mono", monospace;
  --sbx-fs-micro: 10.5px;
  --sbx-fs-meta: 12px;
  --sbx-fs-small: 13px;
  --sbx-fs-body: 14px;
  --sbx-fs-lead: 16px;
  --sbx-fs-h3: 17px;
  --sbx-fs-h2: 24px;
  --sbx-fs-h1: 44px;
  --sbx-fs-kpi: 34px;
  --sbx-track-tight: -0.02em;
  --sbx-track-display: -0.045em;
  --sbx-control-h-sm: 32px;
  --sbx-control-h-md: 40px;
  --sbx-control-h-lg: 48px;
  --sbx-sidebar-w: 248px;
  --sbx-modal-w: 520px;
  --sbx-drawer-w: 480px;
  --sbx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sbx-dur-fast: 0.15s;
  --sbx-dur: 0.2s;
  --sbx-dur-slow: 0.28s;
  --blur-glass: 16px;
  --blur-glass-strong: 24px;
  --glass-pane-fill: #ffffffe0;
  --glass-float-fill: #fffffff0;
  --glass-scrim-fill: #10173f73;
  --glass-line: #1e2a6e24;
  --glass-filter: blur(var(--blur-glass));
  --glass-filter-strong: blur(var(--blur-glass-strong));
  --glass-scrim-filter: blur(6px);
  --shadow-pane: inset 0 1px 0 #ffffffbf, 0 1px 0 #10173f0d, 0 8px 20px -16px #10173f38;
  --shadow-float: inset 0 1px 0 #fffc, 0 2px 6px #10173f0f, 0 16px 40px -16px #10173f52;
}

[data-sbx-accent="navy"] {
  --sbx-brand-chip: #1e2a6e;
  --sbx-primary: #1e2a6e;
  --sbx-primary-hover: #2b3a8a;
  --sbx-primary-press: #10173f;
  --sbx-focus: 0 0 0 3px #1e2a6e3d;
}

.sbx-brand {
  color: var(--sbx-ink);
  letter-spacing: -0.03em;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
}

.sbx-brand__mark {
  object-fit: contain;
  flex: none;
  width: 34px;
  height: 34px;
  display: block;
}

.sbx-brand--lg {
  gap: 12px;
  font-size: 21px;
}

.sbx-brand--lg .sbx-brand__mark {
  width: 44px;
  height: 44px;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --glass-pane-fill: var(--sbx-surface);
    --glass-float-fill: var(--sbx-surface);
    --glass-scrim-fill: #10173f99;
    --glass-filter: none;
    --glass-filter-strong: none;
    --glass-scrim-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active), print {
  :root {
    --glass-pane-fill: var(--sbx-surface);
    --glass-float-fill: var(--sbx-surface);
    --glass-filter: none;
    --glass-filter-strong: none;
    --glass-scrim-filter: none;
  }
}

html[data-glass="off"] {
  --glass-pane-fill: var(--sbx-surface);
  --glass-float-fill: var(--sbx-surface);
  --glass-filter: none;
  --glass-filter-strong: none;
  --glass-scrim-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sbx-bg: #0e0e0e;
    --sbx-surface: #171717;
    --sbx-surface-2: #131313;
    --sbx-sunken: #1f1f1f;
    --sbx-sunken-2: #262626;
    --sbx-ink: #f2f2ef;
    --sbx-ink-2: #cfcfca;
    --sbx-mute: #a1a19a;
    --sbx-faint: #77776f;
    --sbx-line: #2a2a28;
    --sbx-line-strong: #3a3a37;
    --sbx-scrim: #0009;
    --sbx-primary: #f2f2ef;
    --sbx-primary-hover: #fff;
    --sbx-primary-press: #d9d9d4;
    --sbx-on-primary: #141414;
    --sbx-green: #3db878;
    --sbx-red: #ef6b6b;
    --sbx-blue: #6b93eb;
    --sbx-amber: #e0ab2e;
    --sbx-purple: #a58bf5;
    --sbx-green-soft: #3db87824;
    --sbx-red-soft: #ef6b6b24;
    --sbx-blue-soft: #6b93eb29;
    --sbx-amber-soft: #e0ab2e29;
    --sbx-purple-soft: #a58bf529;
    --sbx-amber-ink: #e6c36a;
    --sbx-red-border: #ef6b6b59;
    --sbx-red-border-hover: #ef6b6b99;
    --sbx-grad-mint: radial-gradient(120% 120% at 20% 0%, #3db87838 0, transparent 62%);
    --sbx-grad-peach: radial-gradient(110% 110% at 90% 0%, #ff8c5a33 0, transparent 60%);
    --sbx-grad-aqua: radial-gradient(120% 120% at 50% 100%, #5ac8be33 0, transparent 70%);
    --sbx-grad-lilac: radial-gradient(110% 110% at 10% 0%, #8c6eff38 0, transparent 62%);
    --sbx-grad-sun: radial-gradient(110% 110% at 100% 0%, #ffc83c33 0, transparent 62%);
    --sbx-sh-1: 0 1px 2px #0006, 0 6px 20px #0000004d;
    --sbx-sh-2: 0 2px 4px #0006, 0 14px 34px #00000073;
    --sbx-sh-modal: 0 4px 10px #00000080, 0 30px 70px #0009;
    --sbx-sh-btn: 0 1px 2px #0006;
    --sbx-sh-btn-hover: 0 2px 4px #0006, 0 8px 18px #00000059;
    --glass-pane-fill: #171717e0;
    --glass-float-fill: #1c1c1cf0;
    --glass-scrim-fill: #00000080;
    --glass-line: #ffffff1f;
    --shadow-pane: inset 0 1px 0 #ffffff14, 0 8px 20px -16px #00000080;
    --shadow-float: 0 16px 40px -16px #000000a6;
  }

  :root:not([data-theme="light"])[data-sbx-accent="navy"] {
    --sbx-primary: #8c9bff;
    --sbx-primary-hover: #a3afff;
    --sbx-primary-press: #7684e6;
    --sbx-on-primary: #0b1030;
    --sbx-focus: 0 0 0 3px #8c9bff59;
  }

  :root:not([data-theme="light"]) .sbx-brand__mark {
    filter: brightness(0) invert(0.93);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sbx-bg: #0e0e0e;
  --sbx-surface: #171717;
  --sbx-surface-2: #131313;
  --sbx-sunken: #1f1f1f;
  --sbx-sunken-2: #262626;
  --sbx-ink: #f2f2ef;
  --sbx-ink-2: #cfcfca;
  --sbx-mute: #a1a19a;
  --sbx-faint: #77776f;
  --sbx-line: #2a2a28;
  --sbx-line-strong: #3a3a37;
  --sbx-scrim: #0009;
  --sbx-green: #3db878;
  --sbx-red: #ef6b6b;
  --sbx-blue: #6b93eb;
  --sbx-amber: #e0ab2e;
  --sbx-purple: #a58bf5;
  --sbx-green-soft: #3db87824;
  --sbx-red-soft: #ef6b6b24;
  --sbx-blue-soft: #6b93eb29;
  --sbx-amber-soft: #e0ab2e29;
  --sbx-purple-soft: #a58bf529;
  --sbx-amber-ink: #e6c36a;
  --sbx-red-border: #ef6b6b59;
  --sbx-red-border-hover: #ef6b6b99;
  --sbx-grad-mint: radial-gradient(120% 120% at 20% 0%, #3db87838 0, transparent 62%);
  --sbx-grad-peach: radial-gradient(110% 110% at 90% 0%, #ff8c5a33 0, transparent 60%);
  --sbx-grad-aqua: radial-gradient(120% 120% at 50% 100%, #5ac8be33 0, transparent 70%);
  --sbx-grad-lilac: radial-gradient(110% 110% at 10% 0%, #8c6eff38 0, transparent 62%);
  --sbx-grad-sun: radial-gradient(110% 110% at 100% 0%, #ffc83c33 0, transparent 62%);
  --sbx-sh-1: 0 1px 2px #0006, 0 6px 20px #0000004d;
  --sbx-sh-2: 0 2px 4px #0006, 0 14px 34px #00000073;
  --sbx-sh-modal: 0 4px 10px #00000080, 0 30px 70px #0009;
  --sbx-sh-btn: 0 1px 2px #0006;
  --sbx-sh-btn-hover: 0 2px 4px #0006, 0 8px 18px #00000059;
  --glass-pane-fill: #171717e0;
  --glass-float-fill: #1c1c1cf0;
  --glass-scrim-fill: #00000080;
  --glass-line: #ffffff1f;
  --shadow-pane: inset 0 1px 0 #ffffff14, 0 8px 20px -16px #00000080;
  --shadow-float: 0 16px 40px -16px #000000a6;
}

:root[data-theme="dark"][data-sbx-accent="navy"] {
  --sbx-primary: #8c9bff;
  --sbx-primary-hover: #a3afff;
  --sbx-primary-press: #7684e6;
  --sbx-on-primary: #0b1030;
  --sbx-focus: 0 0 0 3px #8c9bff59;
}

:root[data-theme="dark"] .sbx-brand__mark {
  filter: brightness(0) invert(0.93);
}