/* Spectra Free Editor Tokens
   Public editor token layer. Framework values are primary; editor-specific
   semantics remain local and derive from the verified v0.2 token surface. */

:root{
  color-scheme:dark;

  --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;
}

body.sp-app-shell.sv-freeEditor{
  --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);

  --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%);

  /* Verified Spectra Framework v0.2 bridges. */
  --sv-shell-app-w:var(--sp-shell-app-w,100vw);
  --sv-shell-app-h:var(--sp-shell-app-h,100dvh);
  --sv-shell-safe-top:var(--sp-shell-safe-top,env(safe-area-inset-top,0px));
  --sv-shell-safe-right:var(--sp-shell-safe-right,env(safe-area-inset-right,0px));
  --sv-shell-safe-bottom:var(--sp-shell-safe-bottom,env(safe-area-inset-bottom,0px));
  --sv-shell-safe-left:var(--sp-shell-safe-left,env(safe-area-inset-left,0px));
  --sv-radius-round:var(--sp-radius-round,9999px);
  --sv-font-mono:var(--sp-font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
  --sv-motion-fast:var(--sp-duration-2,180ms);
  --sv-motion-normal:var(--sp-duration-3,260ms);
  --sv-motion-ease:var(--sp-ease-standard,cubic-bezier(.2,0,0,1));
  --sv-drawer-motion-duration:calc(var(--sv-motion-fast) + 20ms);

  --sv-z-page:var(--sp-layer-base,0);
  --sv-z-footer:calc(var(--sp-layer-sticky,10) - 1);
  --sv-z-header:var(--sp-layer-sticky,10);
  --sv-z-profile-menu:var(--sp-z-popover,30);
  --sv-z-language-menu:var(--sp-layer-modal,50);
  --sv-z-tools-backdrop:calc(var(--sp-layer-overlay,70) - 1);
  --sv-z-tools-drawer:var(--sp-layer-overlay,70);
  --sv-z-orientation-guard:calc(var(--sp-layer-overlay,70) + 1);

  --sv-shell-gutter:var(--sp-shell-pad,var(--sp-2,.5rem));
  --sv-shell-gap:var(--sp-shell-gap,var(--sp-3,.75rem));
  --sv-shell-header-block:calc(var(--sp-10,2.5rem) + var(--sp-1,.25rem));
  --sv-shell-content-max:96rem;

  /* Editor shell geometry. */
  --sv-editor-header-h:clamp(
    calc(var(--sp-10,2.5rem) + var(--sp-4,1rem)),
    7svh,
    calc(var(--sp-10,2.5rem) + var(--sp-7,1.75rem))
  );
  --sv-editor-header-h-mobile:clamp(7rem,14svh,7.75rem);
  --sv-editor-header-brand-row-min:var(--sp-10,2.5rem);
  --sv-editor-header-tools-row-h:calc(var(--sp-9,2.25rem) + var(--sp-border-w-2,2px));

  --sv-editor-footer-panel-h:clamp(
    calc(var(--sp-10,2.5rem) + var(--sp-4,1rem)),
    7svh,
    calc(var(--sp-10,2.5rem) + var(--sp-7,1.75rem))
  );
  --sv-editor-footer-panel-h-mobile:clamp(5.5rem,11svh,6.25rem);
  --sv-editor-footer-bottom-gap:max(var(--sv-shell-gutter),var(--sv-shell-safe-bottom));
  --sv-editor-footer-top-gap:calc(var(--sv-shell-gutter) + var(--sp-1,.25rem));
  --sv-editor-footer-reserve:calc(
    var(--sv-editor-footer-panel-h) +
    var(--sv-editor-footer-bottom-gap) +
    var(--sv-editor-footer-top-gap)
  );
  --sv-editor-footer-meta-fs-mobile:clamp(.6875rem,2.8vw,var(--sp-fs-1,.75rem));

  /* Header and profile dimensions. */
  --sv-header-icon-size:1.05em;
  --sv-header-icon-size-mobile:1.45em;
  --sv-header-action-min-h:2.35rem;
  --sv-header-action-h-mobile:var(--sv-editor-header-tools-row-h);
  --sv-profile-button-size:var(--sp-10,2.5rem);
  --sv-profile-avatar-size:calc(var(--sv-profile-button-size) - var(--sp-1,.25rem));
  --sv-profile-button-size-wide:calc(var(--sp-10,2.5rem) + var(--sp-1,.25rem));
  --sv-profile-avatar-size-wide:var(--sp-10,2.5rem);
  --sv-profile-focus-outline:var(--sp-outline-1,var(--sp-border-w-2,2px));
  --sv-profile-focus-offset:calc(var(--sp-1,.25rem) / 2);
  --sv-profile-menu-shadow:0 var(--sp-5,1.25rem) calc(var(--sp-10,2.5rem) + var(--sp-2,.5rem)) color-mix(in srgb,#000,transparent 52%);

  /* Drawer dimensions and motion. */
  --sv-drawer-width:clamp(17.5rem,27vw,21rem);
  --sv-drawer-max-mobile:21rem;
  --sv-drawer-close-h:calc(var(--sp-8,2rem) + var(--sp-1,.25rem));
  --sv-drawer-action-h:calc(var(--sp-9,2.25rem) + var(--sp-2,.5rem));
  --sv-drawer-action-icon-size:1.42em;
  --sv-drawer-action-icon-size-mobile:1.36em;
  --sv-drawer-shadow:
    1.1rem 0 2.8rem color-mix(in srgb,#000,transparent 62%),
    inset var(--sp-border-w-1-neg,-1px) 0 0 color-mix(in srgb,var(--sv-blue),transparent 74%);

  /* Touch typing and orientation guard semantics. */
  --sv-ios-focus-font-size:var(--sp-fs-3,1rem);
  --sv-keyboard-scroll-padding:var(--sp-3,.75rem);
  --sv-orientation-panel-max:28rem;
  --sv-orientation-panel-inline:92vw;
  --sv-orientation-copy-max:24rem;
  --sv-orientation-icon-size:3.25rem;
  --sv-orientation-icon-font-size:1.65rem;
  --sv-orientation-panel-shadow:0 var(--sp-5,1.25rem) var(--sp-10,2.5rem) color-mix(in srgb,#000,transparent 48%);

  --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%);

  --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%);

  /* Backwards-compatible aliases used by the free-editor layout layer. */
  --sv-control-hover:var(--sv-control-bg-hover);
  --sv-control-compact-block:var(--sv-panel-control-h,var(--sp-8,2rem));
  --sv-control-compact-pad-inline:var(--sv-panel-control-pad-x,var(--sp-2,.5rem));

  --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-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%);

  --sv-drawer-w:var(--sv-drawer-width);
  --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-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);

  /* Backwards-compatible aliases for earlier free-editor CSS names. */
  --sv-header-bg:linear-gradient(135deg,var(--sv-drawer-head-start) 0%,var(--sv-drawer-head-mid) 54%,var(--sv-drawer-head-end) 100%);
  --sv-header-border:var(--sv-drawer-head-line);
  --sv-header-shadow:var(--sv-drawer-head-shadow);
  --sv-header-action-bg:var(--sv-header-btn-bg);
  --sv-header-action-hover:var(--sv-header-btn-bg-hover);
  --sv-header-action-border:var(--sv-header-btn-border);

  --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-panel-bg:var(--sv-preview-shell-bg);
  --sv-panel-header-bg:var(--sv-preview-header-bg);
  --sv-panel-body-bg:var(--sv-preview-body-bg);
  --sv-panel-border:var(--sv-preview-shell-border);
  --sv-panel-border-soft:var(--sv-preview-header-border);
  --sv-panel-shadow:var(--sv-preview-shell-shadow);

  --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-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-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-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-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-editor-font-family:"Cascadia Code",var(--sv-font-mono);
  --sv-editor-font:var(--sv-editor-font-family);
  --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-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);

  --sv-syntax-text:var(--sp-text);
  --sv-syntax-muted:var(--sp-muted);
  --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-attr:var(--sv-syntax-attribute);
  --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%);

  --sv-suggest-bg:color-mix(in srgb,var(--sp-elev),var(--sp-bg) 18%);
  --sv-suggest-border:color-mix(in srgb,var(--sp-border),var(--sp-link) 18%);
  --sv-suggest-shadow:var(--sp-shadow-3);
  --sv-suggest-header-bg:var(--sv-preview-header-bg);
  --sv-suggest-option-hover:var(--sv-control-bg-hover);
  --sv-suggest-option-active:var(--sv-control-bg-active);
  --sv-suggest-muted:var(--sp-muted);
}

@media (max-width:54rem){
  body.sp-app-shell.sv-freeEditor{
    --sv-editor-footer-panel-h:var(--sv-editor-footer-panel-h-mobile);
  }
}

@media (max-width:52rem){
  body.sp-app-shell.sv-freeEditor{
    --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);
  }
}

@media (max-width:38rem){
  body.sp-app-shell.sv-freeEditor{
    --sv-drawer-width:min(100vw,var(--sv-drawer-max-mobile));
  }
}