:root {
  /* Brand — trust UI primary is lavender #8891f2 */
  --color-blurple: #8891f2;
  --color-dark-blurple: #727be8;
  --color-hover-blurple: #9aa2f5;
  --color-spring-green: #3d9a6a;
  --color-fuchsia: #eb459e;
  --color-vivid-cerulean: #3a8fb5;
  --color-ember-orange: #c4843a;
  --color-ekko-red: #c43d5a;
  --color-void: #000000;
  --color-snow: #ffffff;
  --color-not-quite-black: #1a1a1c;
  --color-dark-charcoal: #242428;
  --color-graphite: #4a4a50;
  --color-fog: #babcd9;
  --color-greyple: #8a8a94;
  --color-dim-grey: #6b6b73;
  --color-off-white: #eef0fb;

  /* Trust layout — lavender from #8891f2 */
  --color-accent-gold: #b8a078;
  --color-accent-gold-muted: rgba(184, 160, 120, 0.14);
  --color-trust-purple: #43465f;
  --color-trust-purple-light: #8891f2;
  --color-trust-lavender: #e8e9fc;
  --color-trust-lavender-deep: #dfe3fa;
  --color-trust-bg: #eef0fb;
  --color-trust-bg-deep: #e4e7f8;

  /* Semantic */
  --color-success: var(--color-spring-green);
  --color-success-bg: rgba(61, 154, 106, 0.1);
  --color-info: var(--color-vivid-cerulean);
  --color-info-bg: rgba(58, 143, 181, 0.1);
  --color-warning: var(--color-ember-orange);
  --color-border-subtle: rgba(136, 145, 242, 0.14);
  --color-border-card: rgba(136, 145, 242, 0.2);
  --color-border-strong: rgba(136, 145, 242, 0.32);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-numeric: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Consolas', ui-monospace, monospace;

  --text-body: 15px;
  --leading-body: 1.55;
  --text-body-sm: 13px;
  --text-body-xs: 11px;
  --text-heading-sm: 28px;
  --text-heading: 36px;
  --text-heading-lg: 42px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-cards: 12px;
  --radius-buttons: 8px;
  --radius-button-lg: 10px;
  --radius-pills: 999px;
  --radius-featurepanels: 16px;

  /* Surfaces */
  --surface-cosmic-page: #727be8;
  --surface-app-unified:
    radial-gradient(ellipse 120% 70% at 18% -8%, rgba(255, 255, 255, 0.58), transparent 54%),
    radial-gradient(ellipse 85% 55% at 100% 100%, rgba(136, 145, 242, 0.08), transparent 50%),
    linear-gradient(180deg, #eef0fb 0%, #eceef9 38%, #e8eaf8 72%, #e4e7f8 100%);
  --surface-sidebar: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(236, 238, 250, 0.34) 100%);
  --surface-sidebar-active: rgba(255, 255, 255, 0.88);
  --surface-app-chrome: var(--surface-sidebar);
  --surface-app-surface: #d8dcf5;
  --surface-main: var(--color-trust-bg);
  --surface-main-gradient: var(--surface-app-unified);
  --surface-card: var(--color-snow);
  --surface-card-muted: rgba(255, 255, 255, 0.82);
  --surface-elevated: var(--color-snow);
  --surface-input: var(--color-snow);
  --surface-input-hover: var(--color-trust-lavender);

  /* Form tokens */
  --input-height: 42px;
  --input-height-sm: 34px;
  --input-padding-x: 14px;
  --input-padding-y: 10px;
  --input-border: 1px solid var(--color-border-strong);
  --input-border-hover: 1px solid var(--color-dim-grey);
  --input-border-focus: 1px solid var(--color-blurple);
  --input-focus-ring: 0 0 0 3px rgba(136, 145, 242, 0.28);
  --input-radius: var(--radius-buttons);
  --input-text: var(--color-not-quite-black);
  --input-placeholder: var(--color-greyple);
  --input-disabled-bg: var(--color-off-white);
  --input-disabled-text: var(--color-greyple);
  --select-chevron-size: 16px;

  /* Shadows — restrained */
  --shadow-card: 0 1px 3px rgba(136, 145, 242, 0.1);
  --shadow-card-hover: 0 8px 24px rgba(136, 145, 242, 0.14);
  --shadow-dropdown: 0 16px 40px rgba(136, 145, 242, 0.16);
  --shadow-modal: 0 24px 64px rgba(136, 145, 242, 0.2);
  --shadow-focus-inset: inset 0 0 0 1px var(--color-hover-blurple);

  /* Sidebar chrome */
  --sidebar-text: #43465f;
  --sidebar-text-muted: #6b7094;
  --sidebar-text-faint: #9498b8;
  --sidebar-border: rgba(136, 145, 242, 0.22);
  --sidebar-hover: rgba(255, 255, 255, 0.55);
  --sidebar-active-accent: var(--color-hover-blurple);

  /* Layout */
  --sidebar-width: 252px;
  --topbar-height: 60px;

  /* Motion */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2,  1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* Aliases (phase1 / legacy) */
  --color-text-muted: var(--sidebar-text-muted);
  --space-4: var(--spacing-4);
  --space-6: 6px;
  --space-8: var(--spacing-8);
  --space-12: var(--spacing-12);
  --space-16: var(--spacing-16);
  --space-20: var(--spacing-20);
  --space-24: var(--spacing-24);
  --space-28: var(--spacing-28);
  --space-32: var(--spacing-32);
  --radius-lg: var(--radius-featurepanels);

  /* Scrollbars */
  --scrollbar-size: 6px;
  --scrollbar-size-lg: 8px;
  --scrollbar-track: transparent;
  --scrollbar-track-fill: rgba(136, 145, 242, 0.05);
  --scrollbar-thumb: rgba(136, 145, 242, 0.32);
  --scrollbar-thumb-hover: rgba(136, 145, 242, 0.52);
  --scrollbar-thumb-active: rgba(114, 123, 232, 0.68);
  --scrollbar-radius: 999px;
}

/* ─── Global scrollbars (lavender, thin, premium) ─── */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-gutter: stable;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit / Blink */
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--scrollbar-radius);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
  transition: background-color var(--transition-fast);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Main viewport — slightly wider, easier to grab */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--scrollbar-size-lg);
}

/* Sidebar nav — softer on lavender gradient */
.sidebar .nav-menu {
  scrollbar-color: rgba(107, 112, 148, 0.38) transparent;
}

.sidebar .nav-menu::-webkit-scrollbar-thumb {
  background-color: rgba(107, 112, 148, 0.32);
}

.sidebar .nav-menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 112, 148, 0.52);
}

/* Panels & modals — faint track for nested scroll */
.modal,
.notif-panel,
.custom-select__list,
.chat-preview {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track-fill);
}

.modal::-webkit-scrollbar-track,
.notif-panel::-webkit-scrollbar-track,
.custom-select__list::-webkit-scrollbar-track,
.chat-preview::-webkit-scrollbar-track {
  background: var(--scrollbar-track-fill);
  margin: 4px 0;
}

/* Horizontal table scroll — thinner */
.data-table-wrap::-webkit-scrollbar {
  height: 4px;
}

.data-table-wrap {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}