/* Shared visual tokens keep every screen aligned without per-page themes. */
:root {
  --font:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --background: #e7eaf3;
  --ink: #39405a;
  --muted: #515e78;
  --text-secondary: #515e78;
  --ambient-one: #d8e1f7;
  --ambient-two: #e1d7f2;
  --ambient-three: #dbe4f5;
  --accent: #4f74f5;
  --purple: #8654df;
  color-scheme: light;
}

/* Dark overrides are semantic; light fallbacks remain unchanged. */
:root[data-theme="dark"] {
  --background: #18181c;
  --ink: #f0edf6;
  --muted: #bfc0cd;
  --accent: #ff9a38;
  --purple: #b18aff;
  --on-accent: #241508;
  --shadow-color: #00000040;
  color-scheme: dark;
  --text-secondary: #bfc0cd;
  --text-field: #f0edf6;
  --link: #ffb568;
  --code-purple: #c5a0ff;
  --code-accent: #ffb568;
  --success: #98d6bd;
  --error: #ffb0c5;
  --warning: #f4ce80;
  --focus: #ffb568;
  --accent-hover: #ffad5b;
  --ambient-one: #ff8a1512;
  --ambient-two: #9855eb1c;
  --ambient-three: #6e429612;
  --glass: #292831c9;
  --edge-highlight: #ffffff18;
  --bar: #202026e6;
  --dock: #29282fdf;
  --border: #494451;
  --field-border: #71677b;
  --surface-hover: #3a3246;
  --avatar-start: #45354f;
  --avatar-end: #382940;
  --avatar-text: #ddc2ff;
  --icon-end: #362b46;
  --selected-start: #3c2d43;
  --selected-end: #503529;
  --dock-action-start: #ffb15e;
  --dock-action-end: #ff8b44;
  --selected-indicator: #ffa650;
  --hero-start: #25242ce8;
  --hero-middle: #28232fdf;
  --hero-end: #302339df;
  --surface-tag: #35313fa6;
  --brand-start: #ffad5b;
  --brand-end: #bd93ff;
  --orbit-one: #ffad5b22;
  --orbit-two: #bc85ff26;
  --hero-glow: #a46be62e;
  --code-window: #25222ee8;
  --stat-blue: #493324;
  --stat-purple: #362b46;
  --stat-teal: #243c3a;
  --surface-button: #35313e;
  --surface-empty: #29252f66;
  --surface-step: #34303c;
  --surface-field: #1e1d25;
  --surface-soft: #2c2735;
  --surface-notice: #332b3f;
  --surface-success: #253a32;
  --surface-method: #392d48;
  --surface-error: #432a36;
  --surface-warning: #3c3326;
  --danger-button: #b34f6d;
  --danger-hover: #a84c6a;
  --overlay: #09080fb0;
  --modal: #2b2634fa;
  --toast: #23392ff5;
  --toast-error: #402631f5;
  --featured-start: #32273f;
  --featured-end: #2a2531;
  --code-surface: #1e1b26;
  --fallback-surface: #292630;
}

/* Cosmetic scrollbar styling is shared by Studio and login, including panels. */
:root {
  --scroll-thumb: #a1a8ba;
  --scroll-thumb-hover: #7b849d;
}
:root[data-theme="dark"] {
  --scroll-thumb: #686374;
  --scroll-thumb-hover: #92889f;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
@supports selector(::-webkit-scrollbar) {
  /* Prefer rounded custom thumbs where native thin rules take precedence. */
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
@media (forced-colors: active) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  ::-webkit-scrollbar,
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-corner,
  ::-webkit-scrollbar-button {
    all: revert;
  }
}