/* Shared interactive-section design values, extracted from the component showcase.
   Load in each iframe document. Custom properties inherit into shadow roots.
   Keep sample component skins and simulation mechanics separate. */
:root {
  --arc-font-body: 'Instrument Sans', system-ui, sans-serif;
  --arc-font-heading: 'Space Grotesk', sans-serif;
  --arc-font-mono: 'JetBrains Mono', monospace;
  --arc-page-bg: #04060c;
  --arc-text: #eef2fa;
  --arc-focus: #a9c8ff;
  --arc-status-removed: #ff858d;
  --arc-live: #5fe9bd;
  --arc-section-max-width: 1340px;
  --arc-section-gutter: 64px;
  --arc-section-gutter-tablet: 40px;
  --arc-section-gutter-mobile: 28px;
  --arc-section-padding: 50px 0 76px;
  --arc-section-padding-mobile: 64px 0 45px;
  --arc-heading-padding: 19px 24px;
  --arc-heading-padding-mobile: 16px;
  --arc-control-padding: 15px 24px;
  --arc-control-padding-mobile: 12px;
  --arc-status-padding: 12px 24px;
  --arc-shell-radius: 19px;
  --arc-control-radius: 10px;
  --arc-button-radius: 9px;
  --arc-tab-radius: 7px;
  --arc-primary-padding: 12px 16px;
  --arc-primary-min-width: 172px;
  --arc-primary-width: 172px;
  --arc-tabs-padding: 4px;
  --arc-tabs-gap: 2px;
  --arc-tab-height: 36px;
  --arc-tab-line-height: 18px;
  --arc-tab-padding: 9px 17px;
  --arc-tab-padding-mobile: 9px 8px;
  --arc-story-title-size: 27px;
  --arc-story-title-size-compact: 24px;
  --arc-story-title-size-mobile: 22px;
  --arc-body-size: 13px;
  --arc-button-size: 12px;
  --arc-tab-size: 11px;
  --arc-label-size: 10px;
  --arc-meta-size: 9px;
  --arc-story-line-height: 1.75;
  --arc-story-title-line-height: 1.2;
  --arc-shell-shadow: 0 25px 90px #0003;
  --arc-stage-grid-image: linear-gradient(rgb(120 150 255 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(120 150 255 / 11%) 1px, transparent 1px);
  --arc-stage-grid-size: 22px 22px;
  --arc-stage-grid-mask: radial-gradient(ellipse, #000 20%, transparent 70%);
  --arc-stage-grid-opacity: .6;
  --arc-stage-border: #233047;
  --arc-stage-background: #070c15;
  --arc-stage-chip: #070c15cc;
  --arc-stage-hint: #8fa5ca;
  --arc-shell-background: radial-gradient(rgba(77, 141, 255, 0.28), rgba(124, 92, 255, 0.07) 45%, transparent 70%);
  --arc-primary-background: linear-gradient(120deg, #477fff, #755cf3);
  --arc-primary-border: #6889fa;
  --arc-primary-shadow: 0 5px 20px #6576f418;
  --arc-brand-background: linear-gradient(120deg, #5b9aff, #8661ee);
  --arc-heading-gradient: linear-gradient(100deg, #679eff, #ad91fc);
  --arc-border-subtle: #ffffff09;
  --arc-border-control-bar: #ffffff0b;
  --arc-text-label: #b6c4de;
  --arc-text-muted: #64728d;
  --arc-text-active: #b9cfff;
  --arc-text-live: #95b6b0;
  --arc-accent-blue: #7dafff;
  --arc-text-body: #93a4c1;
  --arc-text-link: #9eafcd;
  --arc-text-link-hover: #d2deff;
  --arc-text-note: #788ba9;
  --arc-control-accent: #788dff;
  --arc-text-control: #8b9cbb;
  --arc-tabs-background: #040811;
  --arc-tabs-border: #28354b;
  --arc-tab-text: #8f9fbb;
  --arc-tab-active-text: #edf3ff;
  --arc-tab-active-background: #1c2b47;
  --arc-tab-active-border: #3d5480;
  --arc-status-background: #050a13;
  --arc-status-text: #8d9fbd;
  --arc-status-caption: #647995;
  --arc-secondary-border: #35445e;
  --arc-secondary-background: #101827;
  --arc-secondary-text: #dbe6f8;
  --arc-secondary-hover: #1b2940;
  --arc-editor-button-background: #152139;
  --arc-editor-primary-background: linear-gradient(125deg,#418bff,#6558f5);
  --arc-stat-blue: #639aff;
  --arc-stat-violet: #a17afa;
  --arc-stat-amber: #f0b354;
  --arc-stat-teal: #5dd7b5;
  --arc-stat-background: #080c12;
  --arc-stat-border: #202a39;
  --arc-stat-value: #edf1f9;
  --arc-stat-label: #d9e2ee;
  --arc-stat-detail: #95a3b7;
  --arc-stage-line: #395278;
  --arc-stage-line-active: #72cfff;
  --arc-stage-layer: rgb(18 31 55 / 82%);
  --arc-stage-layer-border: #405982;
  --arc-stage-glow: rgb(89 112 255 / 28%);
  --arc-stage-complete: #7fcfff;
  --arc-stage-pending: #52627d;
  --arc-trace-background: rgb(5 10 19 / 92%);
  --arc-trace-check: #79e7df;
  --arc-code-keyword: #c59cff;
  --arc-code-element: #73dfff;
  --arc-code-property: #ff809c;
  --arc-code-value: #ffd479;
  --arc-code-punctuation: #eef2fa;
}