/*
 * GENERATED from sphere.tokens.json v0.3.0.
 * Run: npm run build:sphere:tokens
 * Do not edit this file directly.
 */
#sphere-view[data-sphere-theme="dark"] {
    --sphere-ref-color-black: #000000;
    --sphere-ref-color-white: #ffffff;
    --sphere-ref-color-neutral-950: #0a0a0a;
    --sphere-ref-color-neutral-925: #0d0d0d;
    --sphere-ref-color-neutral-900: #111111;
    --sphere-ref-color-neutral-850: #141414;
    --sphere-ref-color-neutral-800: #1a1a1a;
    --sphere-ref-color-neutral-775: #1f1f1f;
    --sphere-ref-color-neutral-750: #212121;
    --sphere-ref-color-neutral-700: #2a2a2a;
    --sphere-ref-color-neutral-450: #737373;
    --sphere-ref-color-neutral-400: #999999;
    --sphere-ref-color-neutral-200: #c4c4c4;
    --sphere-ref-color-neutral-50: #f5f5f5;
    --sphere-ref-color-azure-50: #009cff;
    --sphere-ref-color-azure-50-alpha-06: rgba(0, 156, 255, 0.06);
    --sphere-ref-color-azure-50-alpha-14: rgba(0, 156, 255, 0.14);
    --sphere-ref-color-danger-300: #ff9b8a;
    --sphere-ref-color-white-alpha-06: rgba(255, 255, 255, 0.06);
    --sphere-ref-space-2: 2px;
    --sphere-ref-space-4: 4px;
    --sphere-ref-space-6: 6px;
    --sphere-ref-space-8: 8px;
    --sphere-ref-space-12: 12px;
    --sphere-ref-space-16: 16px;
    --sphere-ref-space-24: 24px;
    --sphere-ref-radius-3: 3px;
    --sphere-ref-radius-7: 7px;
    --sphere-ref-radius-8: 8px;
    --sphere-ref-radius-12: 12px;
    --sphere-ref-radius-pill: 999px;
    --sphere-ref-duration-instant: 0ms;
    --sphere-ref-duration-fast: 120ms;
    --sphere-ref-duration-normal: 180ms;
    --sphere-ref-font-size-caption: 10px;
    --sphere-ref-font-size-control: 11.5px;
    --sphere-ref-font-size-body: 12px;
    --sphere-ref-font-size-title: 14px;
    --sphere-ref-z-index-base: 1;
    --sphere-ref-z-index-chrome: 90;
    --sphere-ref-z-index-popover: 300;
    --sphere-ref-z-index-modal: 600;
    --sphere-ref-z-index-toast: 900;
    --sphere-semantic-color-surface-canvas: var(--sphere-ref-color-neutral-950);
    --sphere-semantic-color-surface-toolbar: var(--sphere-ref-color-neutral-925);
    --sphere-semantic-color-surface-panel: var(--sphere-ref-color-neutral-900);
    --sphere-semantic-color-surface-well: var(--sphere-ref-color-neutral-900);
    --sphere-semantic-color-surface-raised: var(--sphere-ref-color-neutral-800);
    --sphere-semantic-color-surface-input: var(--sphere-ref-color-neutral-775);
    --sphere-semantic-color-surface-control: var(--sphere-ref-color-neutral-775);
    --sphere-semantic-color-surface-control-hover: var(--sphere-ref-color-neutral-700);
    --sphere-semantic-color-border-default: var(--sphere-ref-color-neutral-750);
    --sphere-semantic-color-text-primary: var(--sphere-ref-color-white);
    --sphere-semantic-color-text-secondary: var(--sphere-ref-color-neutral-400);
    --sphere-semantic-color-text-muted: var(--sphere-ref-color-neutral-450);
    --sphere-semantic-color-focus-ring: var(--sphere-ref-color-azure-50);
    --sphere-semantic-color-selection: var(--sphere-ref-color-neutral-50);
    --sphere-semantic-color-outliner-selection: var(--sphere-ref-color-azure-50);
    --sphere-semantic-color-selection-scope: var(--sphere-ref-color-azure-50-alpha-06);
    --sphere-semantic-color-selection-hover: var(--sphere-ref-color-azure-50-alpha-14);
    --sphere-semantic-color-hover-overlay: var(--sphere-ref-color-white-alpha-06);
    --sphere-semantic-color-danger-content: var(--sphere-ref-color-danger-300);
    --sphere-component-toolbar-height: 34px;
    --sphere-component-toolbar-background: var(--sphere-semantic-color-surface-toolbar);
    --sphere-component-toolbar-z-index: var(--sphere-ref-z-index-chrome);
    --sphere-component-statusbar-height: 22px;
    --sphere-component-statusbar-background: var(--sphere-semantic-color-surface-toolbar);
    --sphere-component-panel-width: 260px;
    --sphere-component-panel-inspector-width: 381px;
    --sphere-component-panel-background: var(--sphere-semantic-color-surface-panel);
    --sphere-component-control-height-sm: 20px;
    --sphere-component-control-height-md: 30px;
    --sphere-component-control-height-lg: 32px;
    --sphere-component-control-radius: var(--sphere-ref-radius-8);
    --sphere-component-control-transition: var(--sphere-ref-duration-fast);
    --sphere-component-outliner-row-height: 30px;
    --sphere-component-outliner-row-radius: var(--sphere-ref-radius-8);
    --sphere-component-outliner-icon-size: 12px;
    --sphere-component-outliner-caret-size: 6px;
    --sphere-component-outliner-font-size: var(--sphere-ref-font-size-body);
    --sphere-component-focus-ring-color: var(--sphere-semantic-color-focus-ring);
    --sphere-component-focus-ring-width: 2px;
    --sphere-component-focus-ring-offset: 1px;

    /* Compatibility bridge for the existing SPHERE UI. */
    --u-bar: var(--sphere-semantic-color-surface-toolbar);
    --u-panel: var(--sphere-semantic-color-surface-panel);
    --u-well: var(--sphere-semantic-color-surface-well);
    --u-head: var(--sphere-semantic-color-surface-raised);
    --u-input: var(--sphere-semantic-color-surface-input);
    --u-border: var(--sphere-semantic-color-border-default);
    --u-btn: var(--sphere-semantic-color-surface-control);
    --u-btnh: var(--sphere-semantic-color-surface-control-hover);
    --u-text: var(--sphere-semantic-color-text-primary);
    --u-label: var(--sphere-semantic-color-text-muted);
    --u-sel: var(--sphere-semantic-color-selection);
    --u-hover: var(--sphere-semantic-color-hover-overlay);
}