/* Spectra Viewer canonical application tokens.
   Load after all Viewer component styles. Existing component declarations remain
   temporary compatibility fallbacks; this file is the current value authority.

   Hierarchy:
   1. Spectra framework primitives: --sp-*
   2. Viewer semantic/application tokens: --sv-*
   3. Runtime state tokens set by JavaScript, such as --sv-editor-line-digits
*/

:root{
  /* Viewer palette primitives. */
  --sv-palette-forest-700:#2f5d3a;
  --sv-palette-forest-500:#4f7a58;
  --sv-palette-paper-050:#f7f3e8;
  --sv-palette-violet-900:#352b5e;
  --sv-palette-violet-700:#5c547f;
  --sv-palette-violet-600:#6f62b5;
  --sv-palette-cyan-500:#77b6c8;
  --sv-palette-cyan-450:#73b9d2;
  --sv-palette-blue-450:#83b8dd;
  --sv-palette-blue-400:#8eb6ce;
  --sv-palette-green-500:#a8c97f;
  --sv-palette-green-450:#a6c987;
  --sv-palette-green-400:#9bc98f;
  --sv-palette-green-muted:#7b8f76;
  --sv-palette-green-cdata:#93b7a0;
  --sv-palette-orange-500:#e1a56f;
  --sv-palette-orange-450:#d39a72;
  --sv-palette-orange-400:#cf9f75;
  --sv-palette-gold-450:#c9ad6c;
  --sv-palette-purple-500:#b985d6;
  --sv-palette-purple-450:#b68bd8;
  --sv-palette-purple-400:#b38bd2;
  --sv-palette-pink-450:#c48cb8;
  --sv-palette-danger:#d76b6b;
  --sv-palette-success:#62b779;

  /* Viewer brand aliases composed from Framework theme primitives. */
  --sv-green:var(--sp-accent);
  --sv-green-soft:color-mix(in srgb,var(--sp-accent),var(--sp-text) 28%);
  --sv-green-bright:color-mix(in srgb,var(--sp-accent),white 34%);
  --sv-blue:var(--sp-accent-2);
  --sv-violet:var(--sp-accent-3);

  /* Shared light, shadow, and focus semantics. */
  --sv-line-light-soft:color-mix(in srgb,var(--sp-text),transparent 98%);
  --sv-line-light:color-mix(in srgb,var(--sp-text),transparent 96%);
  --sv-line-light-strong:color-mix(in srgb,var(--sp-text),transparent 94%);
  --sv-shadow-deep:color-mix(in srgb,var(--sp-bg),transparent 72%);
  --sv-shadow-deeper:color-mix(in srgb,var(--sp-bg),transparent 66%);
  --sv-focus-outline:color-mix(in srgb,var(--sv-palette-violet-600),var(--sp-border) 38%);

  /* Links and navigation accents. */
  --sv-link-accent:var(--sv-green-soft);
  --sv-link-accent-hover:var(--sv-green-bright);
  --sv-link-accent-line:color-mix(in srgb,var(--sv-link-accent),transparent 58%);
  --sv-link-accent-glow:color-mix(in srgb,var(--sv-link-accent),transparent 84%);

  /* Generic Viewer controls. */
  --sv-control-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 3%);
  --sv-control-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 6%);
  --sv-control-bg-active:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 10%);
  --sv-control-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 14%);
  --sv-control-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 20%);
  --sv-control-border-active:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 28%);
  --sv-control-shadow-active:inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-blue),transparent 92%);

  --sv-section-toggle-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 3%);
  --sv-section-toggle-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 7%);
  --sv-section-toggle-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 14%);
  --sv-section-toggle-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 22%);

  --sv-status-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 6%);
  --sv-status-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 10%);
  --sv-status-border:color-mix(in srgb,var(--sp-border),var(--sv-green) 18%);
  --sv-status-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-green) 26%);
  --sv-status-neutral-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 5%);
  --sv-status-neutral-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 16%);

  --sv-file-action-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 4%);
  --sv-file-action-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 10%);
  --sv-file-action-border:color-mix(in srgb,var(--sp-border),var(--sv-green) 22%);
  --sv-file-action-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-green) 34%);

  --sv-preview-action-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 5%);
  --sv-preview-action-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 8%);
  --sv-preview-action-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 16%);
  --sv-preview-action-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 25%);

  /* Drawer and search surfaces. */
  --sv-drawer-w:clamp(15.75rem,27vw,22.5rem);
  --sv-drawer-btn-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-elev),var(--sv-blue) 18%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 14%) 100%);
  --sv-drawer-btn-hover:linear-gradient(180deg,color-mix(in srgb,var(--sp-elev),var(--sv-blue) 26%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 20%) 100%);
  --sv-drawer-btn-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 30%);
  --sv-drawer-btn-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 44%);
  --sv-drawer-btn-shadow:var(--sp-shadow-2),inset 0 var(--sp-border-w-1) 0 var(--sv-line-light);
  --sv-drawer-btn-primary-shadow:var(--sp-shadow-2),inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-strong);
  --sv-drawer-input-bg:color-mix(in srgb,var(--sp-surface),var(--sv-blue) 12%);
  --sv-drawer-input-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 30%);
  --sv-drawer-backdrop:color-mix(in srgb,var(--sp-bg),transparent 44%);

  --sv-search-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 42%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-green) 32%) 100%);
  --sv-search-bg-hover:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 52%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-green) 42%) 100%);
  --sv-search-border:color-mix(in srgb,var(--sp-border-strong),var(--sv-green) 38%);
  --sv-search-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-green-bright) 46%);
  --sv-search-shadow:var(--sp-shadow-2),inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-strong);

  /* Scrollbars. */
  --sv-scroll-thumb:linear-gradient(180deg,var(--sv-blue) 0%,color-mix(in srgb,var(--sv-blue),var(--sv-violet) 45%) 52%,var(--sv-violet) 100%);
  --sv-scroll-thumb-solid:color-mix(in srgb,var(--sv-blue),var(--sv-violet) 35%);
  --sv-scroll-thumb-hover:color-mix(in srgb,var(--sv-blue),var(--sv-violet) 58%);
  --sv-scroll-track:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 16%);
  --sv-scroll-thumb-shadow:inset 0 0 0 var(--sp-border-w-1) var(--sv-line-light-strong);

  /* Shared header treatment. */
  --sv-drawer-head-start:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 10%);
  --sv-drawer-head-mid:color-mix(in srgb,var(--sp-surface),var(--sv-blue) 18%);
  --sv-drawer-head-end:color-mix(in srgb,var(--sp-surface),var(--sv-violet) 24%);
  --sv-drawer-head-line:color-mix(in srgb,var(--sp-border),var(--sv-blue) 32%);
  --sv-drawer-head-glow:color-mix(in srgb,var(--sv-violet),transparent 82%);
  --sv-drawer-head-glow-blue:color-mix(in srgb,var(--sv-blue),transparent 82%);
  --sv-drawer-head-shadow:inset 0 var(--sp-border-w-1-neg) 0 var(--sv-line-light),var(--sp-shadow-2);
  --sv-header-btn-bg:color-mix(in srgb,var(--sp-surface-2),var(--sp-text) 6%);
  --sv-header-btn-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sp-text) 10%);
  --sv-header-btn-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 22%);
  --sv-header-btn-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 32%);
  --sv-header-btn-shadow:inset 0 0 0 var(--sp-border-w-1) var(--sv-line-light-soft);

  /* Console. */
  --sv-console-bg:color-mix(in srgb,var(--sp-bg),var(--sp-accent) 8%);
  --sv-console-fg:color-mix(in srgb,var(--sp-text),var(--sp-accent) 18%);
  --sv-console-accent:var(--sv-green-bright);
  --sv-console-border:color-mix(in srgb,var(--sp-border),var(--sv-green) 35%);
  --sv-console-aura:color-mix(in srgb,var(--sv-green),transparent 92%);
  --sv-console-hairline:color-mix(in srgb,var(--sv-green),transparent 96%);

  /* Browser panel surfaces. */
  --sv-browser-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 5%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 7%) 58%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 9%) 100%);
  --sv-browser-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 28%);
  --sv-browser-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light),var(--sp-shadow-3);
  --sv-browser-header-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 18%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 10%) 100%);
  --sv-browser-header-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 22%);
  --sv-browser-header-shadow:inset 0 var(--sp-border-w-1-neg) 0 var(--sv-line-light-soft);
  --sv-browser-body-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 3%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 5%) 100%);
  --sv-browser-file-bg:color-mix(in srgb,var(--sp-surface-2),transparent 98%);
  --sv-browser-file-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);
  --sv-browser-file-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 8%);
  --sv-browser-file-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 28%);
  --sv-browser-file-bg-current:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 7%);
  --sv-browser-file-border-current:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 30%);
  --sv-browser-file-shadow-current:inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-blue),transparent 94%);

  /* Preview/editor shell surfaces. */
  --sv-editor-bg:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 4%);
  --sv-editor-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);
  --sv-preview-shell-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),black 6%) 0%,color-mix(in srgb,var(--sp-bg),black 4%) 52%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 100%);
  --sv-preview-shell-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 24%);
  --sv-preview-shell-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-soft),var(--sp-shadow-3);
  --sv-preview-header-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 16%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 100%);
  --sv-preview-header-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);
  --sv-preview-header-shadow:inset 0 var(--sp-border-w-1-neg) 0 var(--sv-line-light-soft);
  --sv-preview-body-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),black 4%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 5%) 100%);
  --sv-preview-content-bg:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%);
  --sv-preview-content-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 20%);
  --sv-preview-content-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-soft),inset 0 0 0 var(--sp-border-w-1) var(--sv-line-light-soft);
  --sv-preview-framed-bg:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 4%);
  --sv-preview-framed-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);
  --sv-preview-meta-bg:color-mix(in srgb,var(--sp-surface),var(--sv-blue) 16%);
  --sv-preview-meta-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);

  /* Footer. */
  --sv-footer-card-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 6%) 100%);
  --sv-footer-card-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 20%);
  --sv-footer-card-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-soft),var(--sp-shadow-2);
  --sv-footer-card-body-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 12%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 100%);

  /* Shared panel/control scale. */
  --sv-panel-heading-fs:var(--sp-fs-3,1rem);
  --sv-panel-heading-weight:750;
  --sv-panel-heading-lh:1;
  --sv-panel-control-h:var(--sp-4,2rem);
  --sv-panel-control-h-lg:calc(var(--sp-4,2rem) + var(--sp-0,0rem));
  --sv-panel-control-pad-y:var(--sp-1,.25rem);
  --sv-panel-control-pad-x:var(--sp-2,.5rem);
  --sv-panel-control-radius:var(--sp-radius-2,.8rem);
  --sv-panel-control-fs:calc(var(--sp-fs-1,.875rem) - .155rem);
  --sv-panel-header-pad-y:var(--sp-2,.5rem);
  --sv-panel-header-pad-x:var(--sp-3,1rem);
  --sv-panel-header-gap:var(--sp-2,.5rem);
  --sv-panel-inline-gap:var(--sp-2,.5rem);
  --sv-preview-header-h:calc(var(--sp-4,2rem) + var(--sp-2,.5rem) + var(--sp-1,.25rem));
  --sv-preview-meta-h:calc(var(--sp-4,2rem) + var(--sp-1,.25rem));
  --sv-preview-meta-pad-y:var(--sp-1,.25rem);
  --sv-preview-meta-pad-x:var(--sp-3,1rem);
  --sv-preview-action-w:calc(var(--sp-6,6rem) - var(--sp-1,.25rem));
  --sv-preview-text-pad:var(--sp-3,1rem);
  --sv-browse-control-w:calc(var(--sp-3,1rem) + var(--sp-2,.5rem));
  --sv-browse-control-radius:var(--sp-radius-2,.8rem);
  --sv-browse-control-font:var(--sp-fs-1,.875rem);
}

body.sp-app-shell.sv-viewer{
  /* Editor typography and geometry. */
  --sv-editor-font-family:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sv-editor-font-size:.9375rem;
  --sv-editor-line-height:1.6;
  --sv-editor-tab-size:2;
  --sv-editor-padding-block:var(--sp-5);
  --sv-editor-padding-inline:var(--sp-5);
  --sv-code-editor-font-size:.875rem;
  --sv-code-editor-line-height:1.5;
  --sv-editor-language-border:color-mix(in srgb,var(--sp-border),var(--sp-link) 18%);
  --sv-editor-valid:var(--sp-success,var(--sv-palette-success));
  --sv-editor-invalid:var(--sp-danger,var(--sv-palette-danger));
  --sv-editor-gutter-bg:color-mix(in srgb,var(--sp-surface-2),var(--sp-bg) 34%);
  --sv-editor-gutter-border:color-mix(in srgb,var(--sp-border),transparent 18%);
  --sv-editor-gutter-text:color-mix(in srgb,var(--sp-muted),transparent 10%);
  --sv-editor-gutter-extra-width:var(--sp-4);
  --sv-editor-gutter-padding-inline:var(--sp-2);

  /* Syntax semantics. */
  --sv-syntax-comment:color-mix(in srgb,var(--sp-muted),var(--sv-palette-green-muted) 34%);
  --sv-syntax-tag:color-mix(in srgb,var(--sp-link),var(--sv-palette-purple-500) 42%);
  --sv-syntax-attribute:color-mix(in srgb,var(--sv-palette-cyan-500),var(--sp-text) 16%);
  --sv-syntax-string:color-mix(in srgb,var(--sv-palette-green-500),var(--sp-text) 12%);
  --sv-syntax-number:color-mix(in srgb,var(--sv-palette-orange-500),var(--sp-text) 10%);
  --sv-syntax-keyword:color-mix(in srgb,var(--sv-palette-purple-450),var(--sp-text) 12%);
  --sv-syntax-function:color-mix(in srgb,var(--sv-palette-cyan-450),var(--sp-text) 12%);
  --sv-syntax-property:color-mix(in srgb,var(--sv-palette-blue-450),var(--sp-text) 10%);
  --sv-syntax-selector:color-mix(in srgb,var(--sv-palette-purple-400),var(--sp-text) 10%);
  --sv-syntax-value:color-mix(in srgb,var(--sv-palette-green-450),var(--sp-text) 10%);
  --sv-syntax-boolean:color-mix(in srgb,var(--sv-palette-orange-450),var(--sp-text) 10%);
  --sv-syntax-null:color-mix(in srgb,var(--sv-palette-pink-450),var(--sp-text) 12%);
  --sv-syntax-operator:color-mix(in srgb,var(--sv-palette-blue-400),var(--sp-text) 18%);
  --sv-syntax-punctuation:color-mix(in srgb,var(--sp-muted),var(--sp-text) 34%);
  --sv-syntax-doctype:color-mix(in srgb,var(--sv-palette-orange-400),var(--sp-text) 12%);
  --sv-syntax-entity:color-mix(in srgb,var(--sv-palette-gold-450),var(--sp-text) 12%);
  --sv-syntax-template:color-mix(in srgb,var(--sv-palette-green-400),var(--sp-text) 12%);
  --sv-syntax-processing:color-mix(in srgb,var(--sv-palette-orange-400),var(--sp-text) 12%);
  --sv-syntax-cdata:color-mix(in srgb,var(--sv-palette-green-cdata),var(--sp-text) 12%);
  --sv-syntax-markdown-heading:color-mix(in srgb,var(--sv-palette-purple-450),var(--sp-text) 10%);
  --sv-syntax-markdown-marker:color-mix(in srgb,var(--sv-palette-blue-450),var(--sp-text) 14%);
  --sv-syntax-markdown-link:color-mix(in srgb,var(--sp-link),var(--sv-palette-cyan-500) 22%);
  --sv-syntax-code:color-mix(in srgb,var(--sv-palette-green-500),var(--sp-text) 10%);

  /* Focus mode. */
  --sv-editor-focus-max-w:96rem;
  --sv-editor-focus-pad:var(--sp-2);
  --sv-editor-focus-active-border:color-mix(in srgb,var(--sp-link),var(--sp-border) 38%);
  --sv-editor-focus-active-bg:color-mix(in srgb,var(--sp-link),var(--sp-surface-2) 88%);

  /* Voxia tray geometry and palette. */
  --sv-voxia-sheet-w:min(calc(100vw - var(--sp-4)),76rem);
  --sv-voxia-sheet-h:min(24rem,58svh);
  --sv-voxia-sheet-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom,0px));
  --sv-voxia-gutter:calc(var(--sp-4) + var(--sp-2));
  --sv-voxia-inner-gutter:var(--sp-6);
  --sv-voxia-gap:var(--sp-3);
  --sv-voxia-feed-max-w:52rem;
  --sv-voxia-conversation-max-w:46rem;
  --sv-voxia-composer-max-w:48rem;
  --sv-voxia-bubble-max-w:min(28rem,88%);
  --sv-voxia-user-bubble-max-w:min(25rem,82%);
  --sv-voxia-header-button-min-w:calc(var(--sp-10) + var(--sp-5));
  --sv-voxia-send-min-w:calc(var(--sp-10) + var(--sp-4));
  --sv-voxia-composer-min-h:calc(var(--sp-10) - var(--sp-1));
  --sv-voxia-handle-w:calc(var(--sp-8) + var(--sp-3));
  --sv-voxia-handle-h:calc(var(--sp-hairline) * 3);
  --sv-voxia-scrollbar-gutter:var(--sp-5);
  --sv-voxia-user-bubble-bg:var(--sv-palette-forest-700);
  --sv-voxia-user-bubble-border:var(--sv-palette-forest-500);
  --sv-voxia-user-bubble-text:var(--sv-palette-paper-050);
  --sv-voxia-ai-bubble-bg:var(--sp-surface-2);
  --sv-voxia-ai-bubble-border:color-mix(in srgb,var(--sp-border),var(--sv-palette-violet-700) 20%);
  --sv-voxia-ai-bubble-text:var(--sp-text);
  --sv-voxia-ai-bubble-violet-bg:var(--sv-palette-violet-900);
  --sv-voxia-ai-bubble-violet-border:#4b7d82;
  --sv-voxia-ai-bubble-violet-text:#f5f2ff;
  --sv-voxia-sheet-bg:color-mix(in srgb,var(--sp-elev),var(--sp-bg) 18%);
  --sv-voxia-sheet-border:color-mix(in srgb,var(--sp-border),var(--sp-link) 18%);
  --sv-voxia-sheet-shadow:var(--sp-shadow-3);
  --sv-voxia-sheet-divider:color-mix(in srgb,var(--sp-border),var(--sp-link) 12%);
  --sv-voxia-focus-outline:var(--sv-focus-outline);

  /* Tools drawer. */
  --sv-tools-drawer-w:clamp(calc(var(--sp-4) * 17),84vw,calc(var(--sp-4) * 22));
  --sv-tools-gutter:var(--sp-3);
  --sv-tools-header-pad-block:var(--sp-2);
  --sv-tools-section-gap:var(--sp-4);
  --sv-tools-control-gap:var(--sp-2);
  --sv-tools-control-min-h:calc(var(--sp-9) + var(--sp-1));
  --sv-tools-inline-btn-min-w:calc(var(--sp-10) + var(--sp-8));
  --sv-tools-filter-btn-min-w:calc(var(--sp-10) * 2);

  /* Phone orientation guard. */
  --sv-orientation-breakpoint-h:38rem;
  --sv-orientation-overlay-z:99998;
  --sv-orientation-card-z:99999;
  --sv-orientation-card-w:34rem;
  --sv-orientation-card-pad:var(--sp-4);
  --sv-orientation-card-radius:var(--sp-radius-3);
  --sv-orientation-card-border:var(--sp-border-1);
  --sv-orientation-card-shadow:var(--sp-shadow-4);
  --sv-orientation-message-fs:var(--sp-fs-4);
  --sv-orientation-message-lh:var(--sp-lh-2);
  --sv-orientation-message-fw:var(--sp-fw-semibold);
  --sv-orientation-card-bg:color-mix(in srgb,var(--sp-surface-2),var(--sp-bg) 12%);
  --sv-orientation-card-border-color:color-mix(in srgb,var(--sp-border),var(--sv-link-accent) 34%);
  --sv-orientation-overlay-bg:linear-gradient(135deg,color-mix(in srgb,var(--sp-bg),var(--sp-surface-2) 8%),color-mix(in srgb,var(--sp-surface-2),var(--sp-link) 8%));
  --sv-orientation-overlay-glow:radial-gradient(circle at 25% 15%,color-mix(in srgb,var(--sv-link-accent),transparent 84%),transparent 34%);
}

/* Browser-only semantic and geometry tokens. */
#browser{
  --sv-browse-accent:var(--sv-link-accent,var(--sp-link));
  --sv-browse-accent-alt:var(--sp-accent-2);
  --sv-browse-success:var(--sp-success,var(--sp-accent));
  --sv-browse-danger:var(--sp-danger);
  --sv-browse-hover-raise:var(--sp-border-w-1-neg);
  --sv-browse-hover-filter:brightness(1.04);
  --sv-browse-row-hover-bg:linear-gradient(90deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent) 10%),color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent-alt) 5%));
  --sv-browse-row-hover-border:color-mix(in srgb,var(--sp-border),var(--sv-browse-accent) 36%);
  --sv-browse-row-hover-shadow:var(--sp-shadow-2),inset calc(var(--sp-border-w-2) + var(--sp-border-w-1)) 0 0 color-mix(in srgb,var(--sv-browse-accent),transparent 24%),inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-browse-accent),transparent 91%);
  --sv-browse-row-selected-bg:linear-gradient(90deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent) 15%),color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent-alt) 8%));
  --sv-browse-row-selected-border:color-mix(in srgb,var(--sp-border-strong),var(--sv-browse-success) 48%);
  --sv-browse-row-selected-shadow:var(--sp-shadow-3),inset calc(var(--sp-border-w-2) + var(--sp-border-w-2)) 0 0 color-mix(in srgb,var(--sv-browse-success),transparent 5%),inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-browse-success),transparent 87%);
  --sv-browse-dir-bg:linear-gradient(90deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent) 4%),transparent 48%);
  --sv-browse-dir-bg-hover:linear-gradient(90deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent) 13%),color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent-alt) 6%));
  --sv-browse-drag-border:color-mix(in srgb,var(--sp-border-strong),var(--sv-browse-success) 50%);
  --sv-browse-drag-shadow:inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-browse-success),transparent 82%),var(--sp-shadow-2);
  --sv-browse-drop-bg:linear-gradient(90deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent) 20%),color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-accent-alt) 9%));
  --sv-browse-drop-border:color-mix(in srgb,var(--sp-border-strong),var(--sv-browse-success) 62%);
  --sv-browse-drop-shadow:var(--sp-shadow-3),inset calc(var(--sp-border-w-2) + var(--sp-border-w-2)) 0 0 var(--sv-browse-success),inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-browse-success),transparent 78%);
  --sv-browse-drop-blocked-bg:linear-gradient(90deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-browse-danger) 11%),color-mix(in srgb,var(--sp-surface-2),var(--sp-text) 2%));
  --sv-browse-drop-blocked-border:color-mix(in srgb,var(--sp-border-strong),var(--sv-browse-danger) 48%);
  --sv-browse-drop-blocked-shadow:inset calc(var(--sp-border-w-2) + var(--sp-border-w-2)) 0 0 color-mix(in srgb,var(--sv-browse-danger),transparent 25%);
  --sv-browse-focus-ring:color-mix(in srgb,var(--sp-focus),var(--sv-browse-success) 52%);

  --sv-browser-inline-label-gap:var(--sp-2);
  --sv-browser-compact-header-pad-start:calc(var(--sp-2) + var(--sp-border-w-1));
  --sv-browser-compact-header-pad-end:var(--sp-2);
  --sv-browser-compact-header-gap:calc(var(--sp-1) + var(--sp-border-w-1));
  --sv-browser-compact-title-gap:calc(var(--sp-1) + var(--sp-border-w-1));
  --sv-browser-compact-title-fs:var(--sp-fs-3);
  --sv-browser-compact-title-lh:var(--sp-lh-1);
  --sv-browser-compact-path-fs:var(--sp-fs-2);
  --sv-browser-compact-actions-gap:calc(var(--sp-1) + var(--sp-border-w-1));
  --sv-area-compact-grid-gap:calc(var(--sp-1) + var(--sp-border-w-1));
  --sv-area-compact-min-height:calc(var(--sp-7) + var(--sp-border-w-1));
  --sv-area-compact-pad-block:var(--sp-1);
  --sv-area-compact-pad-inline:var(--sp-1);
  --sv-area-compact-radius:var(--sp-radius-3);
  --sv-area-compact-fs:var(--sp-fs-1);
  --sv-status-compact-pad-inline:var(--sp-2);
  --sv-status-panel-header-gap:var(--sp-1);

  --sv-browser-title-fs:var(--sp-fs-5);
  --sv-browser-path-fs:var(--sp-fs-2);
  --sv-workspace-btn-fs:var(--sp-fs-3);
  --sv-status-fs:var(--sp-fs-2);
  --sv-file-title-fs:var(--sp-fs-4);
  --sv-file-kind-fs:var(--sp-fs-2);
  --sv-browser-title-lh:var(--sp-lh-1);
  --sv-browser-control-lh:var(--sp-lh-1);
  --sv-file-title-lh:var(--sp-lh-1);
  --sv-file-kind-lh:var(--sp-lh-1);
  --sv-workspace-btn-fw:var(--sp-fw-semibold);
  --sv-file-title-fw:var(--sp-fw-bold);
  --sv-file-kind-opacity:var(--sp-opacity-80);
  --sv-file-arrow-opacity:var(--sp-opacity-80);
  --sv-workspace-grid-template:repeat(2,minmax(0,1fr));
  --sv-workspace-gap:var(--sp-1,.25rem);
  --sv-file-row-pad-block:var(--sp-2);
  --sv-file-row-pad-inline:var(--sp-3);

  /* Final active workspace-button treatment. */
  --sv-workspace-btn-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-link-accent) 4%);
  --sv-workspace-btn-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-link-accent) 9%);
  --sv-workspace-btn-bg-active:color-mix(in srgb,var(--sp-surface-2),var(--sv-link-accent) 13%);
  --sv-workspace-btn-border:color-mix(in srgb,var(--sp-border),var(--sv-link-accent) 18%);
  --sv-workspace-btn-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-link-accent) 28%);
  --sv-workspace-btn-border-active:color-mix(in srgb,var(--sp-border-strong),var(--sv-link-accent) 42%);
  --sv-workspace-btn-color:color-mix(in srgb,var(--sp-text),var(--sv-link-accent) 8%);
  --sv-workspace-btn-color-active:var(--sp-text);
  --sv-workspace-btn-shadow-active:inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-link-accent),transparent 48%);
  --sv-parent-row-bg:color-mix(in srgb,var(--sp-surface-2),transparent 18%);
  --sv-parent-row-border:color-mix(in srgb,var(--sp-border),var(--sv-link-accent) 10%);
  --sv-parent-row-color:color-mix(in srgb,var(--sp-text),var(--sp-muted) 12%);

  --sv-browser-header-pad-block:var(--sp-3);
  --sv-browser-header-pad-inline:calc(var(--sp-4) + var(--sp-1));
  --sv-browser-header-gap:var(--sp-3);

  /* Browse/workspace collapse controls. */
  --sv-panel-title-control-h:calc(var(--sp-3,1rem) + var(--sp-1,.25rem));
  --sv-panel-title-radius:var(--sp-radius-1,.65rem);
  --sv-panel-title-gap:var(--sp-1,.25rem);
  --sv-panel-title-pad-x:var(--sp-1,.25rem);
  --sv-browser-header-pad-y:var(--sp-1,.25rem);
  --sv-browser-header-pad-x:var(--sp-3,1rem);
  --sv-browser-path-pad-y:var(--sp-1,.25rem);
  --sv-browser-collapsed-header-h:calc(var(--sp-4,2rem) + var(--sp-2,.5rem) + var(--sp-1,.25rem));
  --sv-workspace-control-h:calc(var(--sp-3,1rem) + var(--sp-1,.25rem));
  --sv-workspace-row-h:calc(var(--sv-workspace-control-h) + var(--sv-workspace-control-h) + var(--sv-workspace-gap) + var(--sp-1,.25rem));

  /* Desktop Browse row actions. */
  --sv-desktop-file-action-size:1.75rem;
  --sv-desktop-file-action-gap:.125rem;
  --sv-desktop-file-action-pad:.35rem;
  --sv-desktop-file-action-bg:transparent;
  --sv-desktop-file-action-border:transparent;
  --sv-desktop-file-action-color:var(--sv-link-accent);
  --sv-desktop-file-action-color-hover:var(--sv-link-accent-hover);
}

#preview{
  --sv-preview-header-pad-block:var(--sp-3);
  --sv-preview-header-pad-inline:calc(var(--sp-4) + var(--sp-1));
  --sv-preview-header-min-height:calc(var(--sp-10) + var(--sp-3));
  --sv-preview-header-gap:var(--sp-3);
  --sv-preview-heading-gap:var(--sp-3);
  --sv-preview-title-fs:var(--sp-fs-3);
  --sv-preview-title-lh:var(--sp-lh-1);
  --sv-preview-control-min-height:calc(var(--sp-7) + var(--sp-border-w-2));
  --sv-preview-control-pad-block:var(--sp-1);
  --sv-preview-control-pad-inline:var(--sp-3);
  --sv-preview-control-radius:var(--sp-radius-3);
  --sv-preview-control-fs:var(--sp-fs-1);
  --sv-preview-control-lh:var(--sp-lh-1);
  --sv-preview-action-gap:var(--sp-2);
}

body.sp-app-shell.sv-viewer[data-voxia-bubble-theme="violet"]{
  --sv-voxia-ai-bubble-bg:var(--sv-voxia-ai-bubble-violet-bg);
  --sv-voxia-ai-bubble-border:var(--sv-voxia-ai-bubble-violet-border);
  --sv-voxia-ai-bubble-text:var(--sv-voxia-ai-bubble-violet-text);
}

@media (max-width:52rem){
  body.sp-app-shell.sv-viewer{
    --sv-editor-font-size:.875rem;
    --sv-code-editor-font-size:.8125rem;
    --sv-editor-padding-block:var(--sp-4);
    --sv-editor-padding-inline:var(--sp-4);
    --sv-editor-gutter-extra-width:var(--sp-3);
    --sv-editor-gutter-padding-inline:var(--sp-1);
    --sv-editor-focus-pad:var(--sp-1);

    --sv-voxia-sheet-w:100vw;
    --sv-voxia-sheet-bottom:0px;
    --sv-voxia-gutter:calc(var(--sp-4) + var(--sp-2));
    --sv-voxia-conversation-max-w:100%;
    --sv-voxia-composer-max-w:100%;
    --sv-voxia-user-bubble-max-w:min(24rem,88%);
    --sv-voxia-scrollbar-gutter:var(--sp-2);

    --sv-tools-drawer-w:min(72vw,calc(var(--sp-4) * 20));
    --sv-tools-gutter:var(--sp-3);
    --sv-tools-section-gap:var(--sp-4);
    --sv-tools-control-gap:var(--sp-2);
    --sv-tools-control-min-h:var(--sp-10);
    --sv-tools-inline-btn-min-w:calc(var(--sp-10) * 2.35);
  }

  #browser{
    --sv-browse-list-top-gap:var(--sp-2,.5rem);
    --sv-mobile-file-row-pad-block:calc(var(--sp-2,.5rem) + var(--sp-hairline,1px));
    --sv-mobile-file-row-pad-inline:calc(var(--sp-3,1rem) + var(--sp-1,.25rem));
    --sv-mobile-file-action-size:calc(var(--sp-9,2.25rem) + var(--sp-1,.25rem));
    --sv-mobile-file-action-gap:var(--sp-1,.25rem);
    --sv-mobile-file-action-pad:calc(var(--sp-3,1rem) + var(--sp-1,.25rem));
    --sv-mobile-row-action-inline-end:var(--sp-2,.5rem);
    --sv-mobile-download-action-nudge:var(--sp-2,.5rem);
    --sv-mobile-file-action-z:var(--sp-z-sticky);
    --sv-mobile-file-action-icon-fs:var(--sp-fs-3,1rem);
    --sv-mobile-file-action-download-opacity:.78;
    --sv-mobile-file-action-open-opacity:.9;
    --sv-mobile-file-action-active-opacity:1;
    --sv-mobile-file-action-color:var(--sv-link-accent);
    --sv-mobile-file-action-color-hover:var(--sv-link-accent-hover);
    --sv-mobile-file-action-bg:transparent;
    --sv-mobile-file-action-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-link-accent) 12%);
    --sv-mobile-file-action-bg-active:color-mix(in srgb,var(--sp-surface-2),var(--sv-link-accent) 18%);
    --sv-mobile-file-action-border:transparent;
    --sv-mobile-file-action-border-hover:color-mix(in srgb,var(--sp-border),var(--sv-link-accent) 28%);
    --sv-file-row-pad-block:var(--sv-mobile-file-row-pad-block);
    --sv-file-row-pad-inline:var(--sv-mobile-file-row-pad-inline);
  }
}