:root {
  /* Semantic palette */
  --surface-base: var(--color-surface);
  --surface-alt: var(--color-surface-alt);
  --surface-raised: var(--color-card);
  --surface-raised-private: var(--color-card-private);
  --surface-raised-critical: var(--color-card-critical);
  --surface-panel: var(--color-panel);
  --surface-panel-hover: var(--color-panel-hover);
  --surface-sunken: var(--color-surface-sunken);
  --surface-muted: var(--color-surface-muted);
  --surface-veil: var(--color-overlay-veil);
  --surface-inverse: var(--color-page);

  --surface-overlay: var(--color-overlay);
  --surface-overlay-muted: var(--color-overlay-muted);
  --surface-overlay-strong: var(--color-overlay-strong);
  --surface-overlay-darker: var(--color-overlay-darker);
  --surface-overlay-black: var(--color-overlay-black);
  --surface-overlay-banner-base: var(--color-page);
  --surface-overlay-banner: var(--surface-overlay-banner-base);
  --surface-overlay-banner-opaque: var(--surface-overlay-banner-base);
  --surface-overlay-banner-strong: color-mix(
    in srgb,
    var(--surface-overlay-banner-base) 82%,
    transparent
  );
  --surface-overlay-banner-bottom: color-mix(
    in srgb,
    var(--surface-overlay-banner-base) 50%,
    transparent
  );
  --surface-overlay-banner-channel-mid: color-mix(
    in srgb,
    var(--surface-overlay-banner-base) 24%,
    transparent
  );
  --surface-overlay-banner-channel-faint: color-mix(
    in srgb,
    var(--surface-overlay-banner-base) 10%,
    transparent
  );
  --surface-overlay-banner-soft: color-mix(
    in srgb,
    var(--surface-overlay-banner-base) 56%,
    transparent
  );
  --surface-overlay-banner-faint: color-mix(
    in srgb,
    var(--surface-overlay-banner-base) 18%,
    transparent
  );
  --surface-overlay-banner-transparent: transparent;
  --surface-overlay-banner-gradient-header: linear-gradient(
    to bottom,
    var(--surface-overlay-banner-opaque) 0%,
    var(--surface-overlay-banner-strong) 38%,
    var(--surface-overlay-banner-soft) 70%,
    var(--surface-overlay-banner-faint) 88%,
    var(--surface-overlay-banner-transparent) 100%
  );
  --surface-overlay-banner-gradient-channel: linear-gradient(
    to top,
    var(--surface-overlay-banner-bottom) 0%,
    var(--surface-overlay-banner-channel-mid) 28%,
    var(--surface-overlay-banner-channel-faint) 42%,
    var(--surface-overlay-banner-transparent) 50%
  );
  --surface-overlay-banner-gradient: var(
    --surface-overlay-banner-gradient-header
  );
  --surface-overlay-panel: var(--color-overlay-panel);
  --surface-overlay-panel-soft: var(--color-overlay-panel-soft);
  --surface-overlay-panel-tint: var(--color-overlay-panel-tint);
  --surface-overlay-panel-glass: var(--color-overlay-panel-glass);
  --surface-overlay-panel-glass-soft: var(--color-overlay-panel-glass-soft);
  --surface-modal-backdrop: var(--color-modal-backdrop);
  --surface-modal: var(--color-modal-surface);
  --blur-modal-backdrop: 18px;
  --blur-modal-alert: 14px;
  --blur-thumbnail-blur: 18px;
  --modal-nav-backdrop-blur: 6px;

  --app-header-centerline-offset: calc(
    var(--space-sm) + (var(--space-2xl-plus) / 2)
  );
  --border-default: var(--color-border);
  --border-subtle: var(--color-border-subtle);
  --border-strong: var(--color-border-translucent-stronger);
  --border-overlay: var(--color-border-translucent);
  --border-overlay-strong: var(--color-border-translucent-strongest);
  --border-overlay-glow: var(--color-border-translucent-glow);
  --border-neutral-soft: var(--color-border-neutral-soft);
  --border-info-soft: var(--color-border-info-soft);
  --border-sidebar-strong: var(--color-border-sidebar-strong);
  --border-width-hairline: 1px;
  --border-width-fine: 0.5px;

  --text-primary: var(--color-text);
  --text-inverse: var(--color-text-inverse);
  --text-muted: var(--color-text-muted);
  --text-muted-strong: var(--color-muted-strong);
  --text-subtle: var(--color-subtle-text);
  --text-frosted-primary: var(--color-text-frosted);
  --text-frosted-strong: var(--color-text-frosted-strong);
  --text-frosted-soft: var(--color-text-frosted-soft);

  --status-info: var(--color-info);
  --status-info-strong: var(--color-info-strong);
  --status-info-surface: var(--color-info-glass);
  --status-info-border: var(--color-info-border);
  --status-info-on: var(--color-info-on);

  --status-success: var(--color-success);
  --status-success-strong: var(--color-success-strong);
  --status-success-surface: var(--color-success-surface);
  --status-success-border: var(--color-success-border);
  --status-success-on: var(--color-success-on);

  --status-warning: var(--color-warning);
  --status-warning-strong: var(--color-warning-strong);
  --status-warning-surface: var(--color-warning-surface);
  --status-warning-border: var(--color-warning-border);
  --status-warning-on: var(--color-warning-on);

  --status-danger: var(--color-critical);
  --status-danger-strong: var(--color-critical-strong);
  --status-danger-surface: var(--color-danger-surface);
  --status-danger-border: var(--color-danger-border);
  --status-danger-on: var(--color-danger-on);

  --status-private: var(--color-private);
  --status-private-strong: var(--color-private-strong);
  --status-private-surface: var(--color-private-surface);
  --status-private-border: var(--color-private-border);
  --status-private-on: var(--color-private-on);

  --status-neutral: var(--color-muted);
  --status-neutral-strong: var(--color-muted-strong);
  --status-neutral-surface: var(--color-neutral-surface);
  --status-neutral-border: var(--color-neutral-border);
  --status-neutral-on: var(--color-neutral-on);

  /* Messaging & notifications */
  --message-bubble-background: var(--surface-sunken);
  --message-bubble-border: var(--border-subtle);
  --message-bubble-text: var(--text-primary);
  --message-bubble-meta: var(--text-muted);
  --message-bubble-outgoing-background: var(--surface-overlay-panel);
  --message-bubble-outgoing-border: var(--border-overlay);

  --unread-badge-background: var(--status-info-strong);
  --unread-badge-text: var(--text-inverse);

  --reply-highlight-background: var(--status-info-surface);
  --reply-highlight-border: var(--status-info-border);
  --reply-highlight-text: var(--status-info-on);
  --reply-highlight-icon: var(--status-info-on);

  --notification-banner-accent: var(--color-accent-strong);
  --notification-banner-accent-strong: var(--color-accent);
  --notification-banner-border: var(--surface-overlay-panel-tint);
  --notification-banner-background: var(--surface-overlay-panel);
  --notification-banner-text: var(--text-primary);
  --notification-banner-icon: var(--text-primary);

  --notification-banner-critical-accent: var(--status-danger-strong);
  --notification-banner-critical-accent-strong: var(--status-danger);
  --notification-banner-critical-border: var(--color-ring-critical-soft);
  --notification-banner-critical-background: var(--surface-raised-critical);
  --notification-banner-critical-text: var(--status-danger-on);

  --notification-banner-success-accent: var(--status-success-strong);
  --notification-banner-success-accent-strong: var(--status-success);
  --notification-banner-success-border: var(--status-success-border);
  --notification-banner-success-background: var(--status-success-surface);
  --notification-banner-success-text: var(--status-success-on);

  --notification-banner-info-accent: var(--status-info-strong);
  --notification-banner-info-accent-strong: var(--status-info);
  --notification-banner-info-border: var(--status-info-border);
  --notification-banner-info-background: var(--status-info-surface);
  --notification-banner-info-text: var(--status-info-on);

  --notification-banner-warning-accent: var(--status-warning-strong);
  --notification-banner-warning-accent-strong: var(--status-warning);
  --notification-banner-warning-border: var(--status-warning-border);
  --notification-banner-warning-background: var(--status-warning-surface);
  --notification-banner-warning-text: var(--status-warning-on);

  /* Layout & stacking */
  --scrollbar-width: 0.5rem;
  --scrollbar-track: var(--color-white-soft);
  --scrollbar-thumb: var(--color-white-softer);
  --scrollbar-thumb-hover: var(--color-white-softest);
  --z-app-header: 40;
  --z-overlay-nav: 60;
  --z-overlay-floating: 70;
  --z-overlay-popover: 140;
  --z-overlay-toast: 180;
  --z-sidebar-overlay: 10;
  --z-sidebar: 20;
  --z-modal-root: 100;
  --z-modal-overlay: 110;
  --z-modal-content: 120;
  --z-modal-player: 130;
  --z-modal-top-root: 140;
  --z-modal-top-overlay: 150;
  --z-modal-top-content: 160;
  --z-modal-peak-root: 165;
  --z-modal-peak-overlay: 175;
  --z-modal-peak-content: 185;
  --z-modal-always-top: 200;
  --overlay-backdrop-color: var(--color-overlay-backdrop);
  --overlay-backdrop-blur: 12px;
  --sidebar-width-expanded-base: 16rem;
  --sidebar-dropup-content-width: 0px;
  --sidebar-width-expanded: max(
    var(--sidebar-width-expanded-base),
    var(--sidebar-dropup-content-width)
  );
  --sidebar-width-collapsed: 4rem;
  --sidebar-width: var(--sidebar-width-expanded);
  --sidebar-control-size: 2.75rem;
  --sidebar-content-gap: 1rem;
  --space-sidebar-shell-inline: var(--space-lg);
  --space-sidebar-shell-block-start: var(--space-sm);
  --space-sidebar-shell-block-end: 1.75rem;
  --space-sidebar-scroll-gap: 1.75rem;
  --space-sidebar-panel-gap: 1.35rem;
  --space-sidebar-panel-padding-block: 1.35rem;
  --space-sidebar-panel-padding-inline: 1.1rem;
  --space-sidebar-footer-gap: 0.85rem;
  --space-sidebar-trigger-padding-block: 0.78rem;
  --space-sidebar-popover-offset: 0.85rem;
  --space-sidebar-popover-padding-block: 0.85rem;
  --space-sidebar-popover-padding-inline: 0.65rem;
  --space-sidebar-popover-gap: 0.45rem;
  --space-sidebar-dropup-scroll-reserve: calc(
    var(--scrollbar-thin-width) + var(--space-sm) + var(--space-2xs)
  );
  --sidebar-dropup-max-height: calc(3rem * 6);
  --space-sidebar-nav-padding-block: 0.7rem;
  --space-sidebar-nav-padding-inline-start: var(--space-xs);
  --space-sidebar-nav-padding-inline-end: calc(
    var(--space-lg) + var(--space-2xs)
  );
  --space-sidebar-subnav-padding-block: 0.55rem;
  --space-sidebar-nav-translate: 0.35rem;
  --grid-card-min-width: 20rem;
  /* Breakpoints (sync with Tailwind screen settings) */
  --breakpoint-lg: 64rem;
  --popover-backdrop-blur: 12px;
  --overlay-panel-radius: var(--radius-lg);
  --overlay-panel-shadow: var(--shadow-lg);
  --overlay-panel-padding-inline: var(--popup-padding-inline);
  --overlay-panel-padding-block: var(--popup-padding-block);
  --toast-translate: -1.5rem;
  --sidebar-mobile-gutter: 3rem;
  --popup-padding-inline: 1rem;
  --popup-padding-block: 0.75rem;
  --video-modal-primary-fr: 1.85fr;
  --video-modal-secondary-min: 320px;
  --video-modal-secondary-max: 35rem;
  --video-modal-secondary-fr: 1fr;
  --video-modal-layout-max: calc(
    var(--layout-player-max-width) + var(--video-modal-secondary-max) +
      var(--space-2xl-plus)
  );
  --revert-modal-sidebar-min: 240px;
  --revert-modal-sidebar-width: 280px;
  --popover-inline-safe-max: calc(100vw - var(--space-xl));

  /* Progress primitives */
  --progress-height-sm: 0.25rem;
  --progress-height-md: 0.5rem;
  --progress-radius: var(--radius-full);
  --progress-track-color: var(--color-border-subtle);
  --progress-fill-color: var(--color-info);
  --progress-transition-duration: var(--motion-duration-fast);
  --progress-transition-ease: var(--motion-ease-out);

  /* Spacing scale */
  --space-4xs: 0.0625rem;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-xs-snug: 0.4rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-md-plus: 1.25rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xl-compact: 2.25rem;
  --space-xl-plus: 2.5rem;
  --space-2xl: 3rem;
  --space-2xl-plus: 3.5rem;

  /* Measurement primitives */
  --size-2px: 2px;
  --size-3px: 3px;
  --size-12px: 12px;
  --size-24px: 24px;
  --size-30px: 30px;
  --size-32px: 32px;
  --size-64px: 64px;
  --size-80px: 80px;
  --size-96px: 96px;
  --size-128px: 128px;
  --size-140px: 140px;
  --size-168px: 168px;
  --size-256px: 256px;
  --size-5-75rem: 5.75rem;
  --size-6rem: 6rem;
  --size-7rem: 7rem;
  --size-8rem: 8rem;
  --size-12rem: 12rem;
  --size-12-5rem: 12.5rem;
  --size-14rem: 14rem;
  --size-16rem: 16rem;
  --size-18rem: 18rem;
  --size-20rem: 20rem;
  --size-28rem: 28rem;
  --size-34rem: 34rem;
  --size-40rem: 40rem;
  --size-45rem: 45rem;
  --size-70rem: 70rem;

  /* Border radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --radius-modal-xl: 1.75rem;
  --radius-sidebar-shell: 1.5rem;
  --radius-sidebar-panel: 1.1rem;
  --radius-sidebar-nav: 0.95rem;
  --radius-toggle-thumb: 0.5625rem;

  /* Component sizing */
  --menu-min-width: 12rem;
  --header-search-max-inline: var(--size-34rem);
  --modal-max-width: 62.5rem;
  --modal-sheet-inline-max: var(--modal-max-width);
  --modal-shell-max-height: 90vh;
  --modal-sheet-max-height: 92vh;
  --modal-body-max-height: calc(92vh - 4rem);
  --profile-modal-inline-max: var(--size-70rem);
  --player-modal-module-scroll-min-height: var(--size-14rem);
  --player-modal-module-scroll-max-height: var(--size-28rem);
  --modal-pane-max-height: 48vh;
  --modal-pane-min-height: 20rem;
  --moderation-badge-max-inline: var(--size-28rem);
  --notification-banner-max-inline: var(--size-28rem);
  --profile-modal-nav-min-width: max-content;
  --profile-modal-nav-max-width: max-content;
  --profile-modal-scrollbar-offset: var(--space-2xs);
  --modal-embed-height: 80vh;
  --profile-history-max-height: 26.25rem;
  --comment-avatar-size: var(--space-xl-plus);
  --comment-composer-min-height: var(--size-7rem);
  --video-modal-reaction-label-min-inline: var(--size-6rem);
  --video-modal-item-media-min: var(--size-5-75rem);
  --video-modal-item-media-max: var(--size-8rem);
  --video-card-compact-media-min: var(--size-8rem);
  --video-card-compact-media-max: var(--size-12-5rem);
  --similar-card-media-width: var(--size-168px);
  --similar-card-media-width-sm: var(--size-140px);
  --docs-popover-scroll-height: var(--size-45rem);
  --profile-modal-active-min-width: var(--size-12rem);
  --status-log-min-height: 5rem;
  --layout-player-max-width: 68.75rem;
  --layout-docs-max-width: 92.5rem;
  --icon-size-sm: var(--font-size-lg);
  --icon-size-md: var(--space-md-plus);
  --icon-size-lg: var(--space-xl-plus);
  --avatar-size-lg: var(--space-2xl-plus);
  --form-textarea-min-height: 8rem;
  --scrollbar-thin-width: 0.4rem;
  --modal-progress-height: calc(var(--space-3xs) * 3);
  --video-modal-action-min-width: 2.75rem;
  --outline-thick-width: 0.1875rem;
  --icon-button-ring-width: var(--outline-thick-width);

  /* Form controls */
  --form-select-icon-offset: var(--space-sm);
  --form-select-icon-gap: var(--space-xs-snug);
  --form-select-icon-hit-area: var(--space-xl-plus);
  --form-select-icon-size: 0.6rem;
  --form-select-divider-width: var(--border-width-hairline);
  --form-checkbox-checkmark-offset: calc(var(--space-3xs) * -1);

  /* Utility measurements */
  --breakpoint-edge-offset: 0.02px;
  --offscreen-offset: -9999px;

  /* Motion */
  --motion-card-enter-translate: var(--space-xs);
  --motion-fade-in-translate: var(--space-md-plus);
  --motion-login-option-hover-translate: calc(var(--size-3px) * -1);
  --motion-video-card-hover-translate: -0.35rem;
  --motion-video-card-backdrop-translate: 0.15rem;

  /* Shadows */
  --shadow-sm: 0 0.0625rem 0.125rem 0 var(--color-shadow-floating);
  --shadow-md: 0 0.25rem 0.375rem -0.0625rem var(--color-shadow-floating);
  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem var(--color-shadow-elevated);
  --shadow-badge-offset-y: var(--size-12px);
  --shadow-badge-blur: var(--size-30px);
  --shadow-notification-offset-y: var(--size-32px);
  --shadow-notification-blur: var(--size-64px);
  --shadow-modal: 0 2.75rem 6rem -1.25rem var(--color-shadow-modal);
  --shadow-sidebar-shell: 0 1.875rem 3.75rem -1.5rem var(--color-shadow-sidebar);
  --shadow-sidebar-accent: 0 1.65rem 3.25rem -1.35rem var(--color-sidebar-glow);
  --shadow-sidebar-trigger: 0 1.25rem 2.5rem -1.35rem var(--color-shadow-panel);
  --shadow-sidebar-dropup: 0 1.75rem 3.25rem -1.45rem var(--color-sidebar-glow);
  --shadow-sidebar-panel: 0 2.25rem 4.5rem -1.85rem var(--color-shadow-sidebar);
  --shadow-sidebar-focus-ring:
    0 0 0 0.125rem var(--color-sidebar-glow),
    0 0 0 0.25rem var(--color-sidebar-hover-strong);
  --shadow-popover-zap: 0 22px 48px -18px var(--color-shadow-intense);
  --shadow-video-modal: 0 1rem 2.25rem var(--color-shadow-elevated);
  --blur-video-card-backdrop-strong: var(--size-24px);
  --video-modal-ambient-blur-min: var(--size-128px);
  --video-modal-ambient-blur-max: var(--size-256px);

  /* Typography */
  --font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-family-mono: "Fira Code", "SFMono-Regular", ui-monospace, monospace;
  --font-size-4xs: 0.65rem;
  --font-size-3xs: 0.6875rem;
  --font-size-2xs: 0.7rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-xl-plus: 1.875rem;
  --font-size-modal-title-base: 1.25rem;
  --font-size-sidebar-nav: 0.95rem;
  --font-size-sidebar-subnav: 0.85rem;
  --font-size-sidebar-trigger: 0.9rem;
  --link-underline-thickness: var(--size-2px);
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  --tracking-extra-wide: 0.2em;

  /* Beacon UI tokens */
  --grid-border-width: calc(var(--space-2xs) / 4);
  --grid-canvas-padding-top: var(--grid-border-width);
  --grid-viewport-min-height: calc(var(--space-xl) - var(--space-sm));
  --grid-cell-padding-block: var(--space-sm);
  --grid-cell-padding-inline: var(--space-md);
  --grid-header-font-size: var(--font-size-xs);
  --grid-header-letter-spacing: 0.08em;
  --grid-overlay-margin: 10%;
  --grid-overlay-padding-block: var(--space-md);
  --grid-overlay-padding-inline: var(--space-xl);
  --grid-overlay-radius: var(--radius-lg);
  --grid-overlay-font-size: var(--font-size-lg);
  --grid-overlay-text-opacity: 0.66;
  --grid-resizer-width: calc(var(--space-2xs) * 1.25);
  --grid-resize-overlay-width: var(--grid-border-width);
  --grid-sort-indicator-size: calc(var(--space-lg) - var(--space-2xs));
  --grid-sort-indicator-offset: var(--space-xs);
  --grid-sort-indicator-stroke: calc(var(--space-2xs) / 2);
  --grid-sort-indicator-thickness: var(--grid-border-width);
  --notify-padding-block: var(--space-md);
  --notify-padding-inline: var(--space-2xl);
  --notify-font-size: var(--font-size-base);
  --notify-dismiss-size: calc(var(--space-xl) + var(--space-xs));
  --notify-dismiss-size-compact: calc(var(--space-lg) + var(--space-2xs));
  --notify-dismiss-font-size: var(--font-size-sm);
  --notify-dismiss-radius: var(--radius-full);
  --notify-dismiss-color: var(--color-subtle);
  --notify-dismiss-background: var(--color-overlay-panel);
  --notify-dismiss-background-hover: var(--color-overlay-panel-soft);
  --z-notify: 1200;

  /* Motion */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 160ms;
  --motion-duration-slow: 280ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --modal-motion-duration: var(--motion-duration-base);
}
:root[data-theme="light"] {
  /* Light theme palette */
  --color-page: rgb(247 248 252);
  --color-page-alt: rgb(242 244 248);
  --color-surface: rgb(255 255 255);
  --color-surface-alt: rgb(248 250 252);
  --color-bg: var(--color-surface);
  --color-card: rgb(255 255 255);
  --color-card-private: rgb(243 236 255);
  --color-card-critical: rgb(255 236 238);
  --color-panel: rgb(252 253 255);
  --color-panel-hover: rgb(239 242 249);
  --color-border: rgb(210 219 236);
  --color-border-subtle: rgb(229 234 242);

  --color-accent: rgb(99 102 241);
  --color-accent-strong: rgb(79 70 229);
  --color-accent-pressed: rgb(67 56 202);
  --color-accent-override: rgb(84 0 17);
  --color-accent-strong-override: rgb(254 0 50);
  --color-accent-pressed-override: rgb(169 0 33);
  --color-primary: var(--color-accent-strong);
  --color-secondary: var(--color-accent);

  --color-logo-accent: var(--color-accent-strong);
  --color-logo-wordmark: rgb(40 54 77);
  --color-logo-wordmark-inverse: var(--color-white);
  --color-logo-background: rgb(15 23 42);
  --color-logo-background-inverse: var(--color-white);

  --color-info: rgb(59 130 246);
  --color-info-strong: rgb(37 99 235);
  --color-info-pressed: rgb(29 78 216);
  --color-info-glass: rgb(59 130 246 / 0.14);
  --color-info-border: rgb(59 130 246 / 0.35);
  --color-info-on: rgb(227 242 255);

  --color-muted-strong: rgb(71 85 105);
  --color-text: rgb(24 31 44);
  --color-text-strong: rgb(12 16 26);
  --color-text-inverse: rgb(255 255 255);
  --color-text-muted: rgb(102 112 133);
  --color-muted: rgb(136 146 166);
  --color-muted-alt: rgb(120 130 150);
  --color-subtle-text: rgb(136 146 166);
  --color-subtle: rgb(243 245 250);
  --color-surface-sunken: rgb(232 235 244);
  --color-surface-muted: rgb(236 240 249);

  --color-critical: rgb(220 54 70);
  --color-critical-strong: rgb(185 32 55);
  --color-danger-surface: rgb(252 226 230);
  --color-danger-border: rgb(220 54 70 / 0.35);
  --color-danger-on: rgb(96 18 31);

  --color-warning: rgb(234 179 8);
  --color-warning-strong: rgb(202 138 4);
  --color-warning-surface: rgb(253 224 71 / 0.35);
  --color-warning-border: rgb(234 179 8 / 0.35);
  --color-warning-glass: rgb(253 224 71 / 0.18);
  --color-warning-on: rgb(92 55 2);

  --color-success: rgb(22 163 74);
  --color-success-strong: rgb(21 128 61);
  --color-success-surface: rgb(222 250 236);
  --color-success-border: rgb(34 197 94 / 0.3);
  --color-success-on: rgb(18 84 48);

  --color-private: rgb(139 92 246);
  --color-private-strong: rgb(124 58 237);
  --color-private-surface: rgb(237 233 254);
  --color-private-border: rgb(139 92 246 / 0.32);
  --color-private-on: rgb(74 29 150);

  --color-neutral-700: rgb(71 85 105);
  --color-neutral-600: rgb(102 112 133);
  --color-neutral-surface: rgb(232 236 244);
  --color-neutral-border: rgb(205 213 226);
  --color-neutral-on: rgb(62 72 92);

  --color-white: rgb(255 255 255);
  --color-black: rgb(0 0 0);

  --color-overlay: rgb(15 23 42 / 0.3);
  --color-overlay-black: rgb(15 23 42 / 0.7);
  --color-overlay-muted: rgb(60 75 105 / 0.18);
  --color-overlay-strong: rgb(15 23 42 / 0.56);
  --color-overlay-darker: rgb(12 18 32 / 0.68);
  --color-overlay-panel: rgb(248 250 255 / 0.92);
  --color-overlay-panel-soft: rgb(244 247 255 / 0.78);
  --color-overlay-panel-tint: rgb(146 170 211 / 0.24);
  --color-overlay-panel-glass: rgb(255 255 255 / 0.85);
  --color-overlay-panel-glass-soft: rgb(246 249 255 / 0.7);
  --color-overlay-panel-gradient-start: rgb(255 255 255 / 0.95);
  --color-overlay-panel-gradient-end: rgb(232 236 244 / 0.92);
  --color-modal-backdrop: rgb(15 23 42 / 0.28);
  --color-modal-surface: rgb(255 255 255 / 0.94);
  --color-overlay-veil: rgb(103 112 133 / 0.45);
  --color-overlay-banner-bottom: rgb(255 255 255 / 0.6);
  --color-overlay-banner-transparent: rgb(255 255 255 / 0);
  --color-overlay-backdrop: rgb(15 23 42 / 0.2);

  --scrollbar-track: color-mix(
    in srgb,
    var(--color-sidebar-border-strong) 40%,
    transparent
  );
  --scrollbar-thumb: color-mix(in srgb, var(--color-accent) 64%, transparent);
  --scrollbar-thumb-hover: color-mix(
    in srgb,
    var(--color-accent-strong) 76%,
    transparent
  );

  --color-sidebar-surface: rgb(255 255 255 / 0.9);
  --color-sidebar-surface-alt: rgb(236 240 247 / 0.72);
  --color-sidebar-border: rgb(184 194 212 / 0.28);
  --color-sidebar-border-strong: rgb(148 163 184 / 0.36);
  --color-sidebar-hover: color-mix(
    in srgb,
    var(--color-accent) 16%,
    transparent
  );
  --color-sidebar-hover-strong: color-mix(
    in srgb,
    var(--color-accent-strong) 24%,
    transparent
  );
  --color-sidebar-glow: color-mix(
    in srgb,
    var(--color-accent) 36%,
    transparent
  );
  --color-sidebar-accent-start: color-mix(
    in srgb,
    var(--color-accent-strong) 88%,
    transparent
  );
  --color-sidebar-accent-end: color-mix(
    in srgb,
    var(--color-accent) 82%,
    transparent
  );
  --color-sidebar-text-muted: var(--color-text-muted);
  --sidebar-icon-filter: brightness(0) saturate(100%);

  --color-surface-tint-subtle: rgb(15 23 42 / 0.08);
  --color-border-translucent: rgb(148 163 184 / 0.18);
  --color-border-translucent-strong: rgb(148 163 184 / 0.22);
  --color-border-translucent-bright: rgb(148 163 184 / 0.28);
  --color-border-translucent-stronger: rgb(148 163 184 / 0.32);
  --color-border-translucent-strongest: rgb(148 163 184 / 0.36);
  --color-border-translucent-glow: rgb(148 163 184 / 0.45);
  --color-border-translucent-medium: rgb(148 163 184 / 0.2);
  --color-border-neutral-soft: rgb(148 163 184 / 0.25);
  --color-border-info-soft: rgb(59 130 246 / 0.32);
  --color-border-sidebar-strong: rgb(102 112 133 / 0.75);

  --color-ring-private: rgb(139 92 246 / 0.5);
  --color-ring-private-hover: rgb(168 85 247 / 0.6);
  --color-ring-critical: rgb(220 54 70 / 0.35);
  --color-ring-critical-soft: rgb(220 54 70 / 0.3);
  --color-ring-critical-hover: rgb(220 54 70 / 0.4);
  --color-ring-critical-strong: rgb(220 54 70 / 0.5);
  --color-ring-alert: rgb(239 68 68 / 0.48);

  --color-gradient-visibility-start: rgb(99 102 241 / 0.28);
  --color-gradient-visibility-end: rgb(129 140 248 / 0.24);

  --color-white-soft: rgb(255 255 255 / 0.08);
  --color-white-softer: rgb(255 255 255 / 0.24);
  --color-white-softest: rgb(255 255 255 / 0.32);

  --color-shadow-floating: rgb(15 23 42 / 0.18);
  --color-shadow-elevated: rgb(15 23 42 / 0.16);
  --color-shadow-panel: rgb(15 23 42 / 0.12);
  --color-shadow-notification: rgb(15 23 42 / 0.14);
  --color-shadow-intense: rgb(15 23 42 / 0.22);
  --color-shadow-sidebar: rgb(15 23 42 / 0.28);
  --color-shadow-modal: rgb(15 23 42 / 0.28);

  --color-divider-strong: rgb(203 213 225 / 0.6);
  --color-text-frosted-strong: rgb(40 54 77 / 0.85);
  --color-text-frosted: rgb(61 74 98 / 0.8);
  --color-text-frosted-soft: rgb(82 96 122 / 0.72);
}
:root[data-theme="dark"],
:root:not([data-theme]) {
  /* Dark theme palette */
  --color-page: rgb(6 10 18);
  --color-page-alt: rgb(8 12 22);
  --color-surface: rgb(10 14 26);
  --color-surface-alt: rgb(14 20 34);
  --color-bg: var(--color-surface);
  --color-card: rgb(18 26 44);
  --color-card-private: rgb(38 28 62);
  --color-card-critical: rgb(58 20 28);
  --color-panel: rgb(16 24 40);
  --color-panel-hover: rgb(24 34 52);
  --color-border: rgb(61 80 112);
  --color-border-subtle: rgb(38 52 76);

  --color-accent: rgb(129 140 248);
  --color-accent-strong: rgb(99 102 241);
  --color-accent-pressed: rgb(79 70 229);
  --color-accent-override: rgb(84 0 17);
  --color-accent-strong-override: rgb(254 0 50);
  --color-accent-pressed-override: rgb(169 0 33);
  --color-primary: var(--color-accent-strong);
  --color-secondary: rgb(56 189 248);

  --color-logo-accent: var(--color-accent-strong);
  --color-logo-wordmark: rgb(198 207 222);
  --color-logo-wordmark-inverse: var(--color-white);
  --color-logo-background: rgb(12 18 30);
  --color-logo-background-inverse: var(--color-white);

  --color-info: rgb(96 165 250);
  --color-info-strong: rgb(56 132 255);
  --color-info-pressed: rgb(37 99 235);
  --color-info-glass: rgb(56 132 255 / 0.22);
  --color-info-border: rgb(96 165 250 / 0.42);
  --color-info-on: rgb(235 244 255);

  --color-muted-strong: rgb(206 215 232);
  --color-text: rgb(226 232 240);
  --color-text-strong: rgb(244 247 255);
  --color-text-inverse: rgb(12 18 30);
  --color-text-muted: rgb(165 179 201);
  --color-muted: rgb(148 163 184);
  --color-muted-alt: rgb(128 139 162);
  --color-subtle-text: rgb(168 180 205);
  --color-subtle: rgb(28 38 58);
  --color-surface-sunken: rgb(13 19 32 / 0.92);
  --color-surface-muted: rgb(18 26 44 / 0.82);

  --color-critical: rgb(239 83 98);
  --color-critical-strong: rgb(220 38 38);
  --color-danger-surface: rgb(220 38 38 / 0.28);
  --color-danger-border: rgb(220 38 38 / 0.45);
  --color-danger-on: rgb(255 228 233);

  --color-warning: rgb(250 204 21);
  --color-warning-strong: rgb(234 179 8);
  --color-warning-surface: rgb(253 224 71 / 0.22);
  --color-warning-border: rgb(250 204 21 / 0.42);
  --color-warning-glass: rgb(253 224 71 / 0.2);
  --color-warning-on: rgb(26 18 0);

  --color-success: rgb(34 197 94);
  --color-success-strong: rgb(22 163 74);
  --color-success-surface: rgb(22 163 74 / 0.24);
  --color-success-border: rgb(34 197 94 / 0.45);
  --color-success-on: rgb(210 252 228);

  --color-private: rgb(168 85 247);
  --color-private-strong: rgb(139 92 246);
  --color-private-surface: rgb(124 58 237 / 0.26);
  --color-private-border: rgb(168 85 247 / 0.45);
  --color-private-on: rgb(239 230 255);

  --color-neutral-700: rgb(58 75 110);
  --color-neutral-600: rgb(90 105 133);
  --color-neutral-surface: rgb(99 114 144 / 0.24);
  --color-neutral-border: rgb(99 114 144 / 0.35);
  --color-neutral-on: rgb(210 220 238);

  --color-white: rgb(255 255 255);
  --color-black: rgb(0 0 0);

  --color-overlay: rgb(8 11 20 / 0.72);
  --color-overlay-black: rgb(0 0 0 / 0.88);
  --color-overlay-muted: rgb(12 18 30 / 0.6);
  --color-overlay-strong: rgb(8 12 24 / 0.82);
  --color-overlay-darker: rgb(5 8 16 / 0.9);
  --color-overlay-panel: rgb(14 20 34 / 0.92);
  --color-overlay-panel-soft: rgb(18 26 42 / 0.78);
  --color-overlay-panel-tint: rgb(56 93 160 / 0.36);
  --color-overlay-panel-glass: rgb(14 24 42 / 0.86);
  --color-overlay-panel-glass-soft: rgb(16 28 48 / 0.72);
  --color-overlay-panel-gradient-start: rgb(18 26 44 / 0.92);
  --color-overlay-panel-gradient-end: rgb(10 16 30 / 0.92);
  --color-modal-backdrop: rgb(5 8 14 / 0.68);
  --color-modal-surface: rgb(14 22 38 / 0.88);
  --color-overlay-veil: rgb(4 6 12 / 0.94);
  --color-overlay-banner-bottom: rgb(0 0 0 / 0.6);
  --color-overlay-banner-transparent: rgb(0 0 0 / 0);
  --color-overlay-backdrop: rgb(5 8 14 / 0.75);

  --scrollbar-track: color-mix(
    in srgb,
    var(--color-sidebar-surface-alt) 54%,
    transparent
  );
  --scrollbar-thumb: color-mix(in srgb, var(--color-accent) 72%, transparent);
  --scrollbar-thumb-hover: color-mix(
    in srgb,
    var(--color-accent-strong) 84%,
    transparent
  );

  --color-sidebar-surface: rgb(12 18 30 / 0.94);
  --color-sidebar-surface-alt: rgb(10 18 32 / 0.8);
  --color-sidebar-border: rgb(86 106 142 / 0.26);
  --color-sidebar-border-strong: rgb(112 133 170 / 0.42);
  --color-sidebar-hover: color-mix(
    in srgb,
    var(--color-accent) 22%,
    transparent
  );
  --color-sidebar-hover-strong: color-mix(
    in srgb,
    var(--color-accent-strong) 32%,
    transparent
  );
  --color-sidebar-glow: color-mix(
    in srgb,
    var(--color-accent) 42%,
    transparent
  );
  --color-sidebar-accent-start: color-mix(
    in srgb,
    var(--color-accent) 92%,
    transparent
  );
  --color-sidebar-accent-end: color-mix(
    in srgb,
    var(--color-accent-strong) 88%,
    transparent
  );
  --color-sidebar-text-muted: var(--color-text-muted);
  --sidebar-icon-filter: brightness(0) invert(1);

  --color-surface-tint-subtle: rgb(94 113 161 / 0.12);
  --color-border-translucent: rgb(99 114 144 / 0.22);
  --color-border-translucent-strong: rgb(110 130 170 / 0.28);
  --color-border-translucent-bright: rgb(148 163 184 / 0.35);
  --color-border-translucent-stronger: rgb(148 163 184 / 0.38);
  --color-border-translucent-strongest: rgb(198 207 222 / 0.45);
  --color-border-translucent-glow: rgb(129 140 248 / 0.55);
  --color-border-translucent-medium: rgb(99 114 144 / 0.28);
  --color-border-neutral-soft: rgb(99 114 144 / 0.3);
  --color-border-info-soft: rgb(96 165 250 / 0.35);
  --color-border-sidebar-strong: rgb(32 46 68 / 0.88);

  --color-ring-private: rgb(168 85 247 / 0.55);
  --color-ring-private-hover: rgb(192 132 252 / 0.65);
  --color-ring-critical: rgb(239 83 98 / 0.42);
  --color-ring-critical-soft: rgb(239 83 98 / 0.35);
  --color-ring-critical-hover: rgb(239 83 98 / 0.5);
  --color-ring-critical-strong: rgb(220 38 38 / 0.6);
  --color-ring-alert: rgb(220 38 38 / 0.6);

  --color-gradient-visibility-start: rgb(129 140 248 / 0.4);
  --color-gradient-visibility-end: rgb(192 132 252 / 0.32);

  --color-white-soft: rgb(255 255 255 / 0.1);
  --color-white-softer: rgb(255 255 255 / 0.3);
  --color-white-softest: rgb(255 255 255 / 0.4);

  --color-shadow-floating: rgb(8 11 30 / 0.55);
  --color-shadow-elevated: rgb(8 11 30 / 0.45);
  --color-shadow-panel: rgb(15 23 42 / 0.35);
  --color-shadow-notification: rgb(15 23 42 / 0.3);
  --color-shadow-intense: rgb(250 204 21 / 0.48);
  --color-shadow-sidebar: rgb(0 0 0 / 0.45);
  --color-shadow-modal: rgb(8 11 30 / 0.55);

  --color-divider-strong: rgb(15 23 42 / 0.35);
  --color-text-frosted-strong: rgb(226 232 240 / 0.94);
  --color-text-frosted: rgb(226 232 240 / 0.9);
  --color-text-frosted-soft: rgb(226 232 240 / 0.82);
}