/* Spore Lab - experimental lime and charcoal theme. */
name: Spore Lab;

/* ── Spacing scale (px) ── */
--spacing-1: 4;
--spacing-2: 8;
--spacing-3: 12;
--spacing-4: 16;
--spacing-5: 20;
--spacing-6: 24;

/* ── Layout chrome (editor dock gaps) ── */
--layout-gap:      6;
--layout-padding:  8;
--panel-padding-h: 10;
--panel-padding-v: 8;
--panel-header-gap: 6;
--viewport-inset:  8;

/* ── Frame clear (renderer) ── */
--frame-clear: #111115;

/* ── Mycelium roots backdrop (editor GPU layer; visible in dock gaps) ── */
--roots-color-a:      rgba(164, 183, 117, 0.75);
--roots-color-b:      rgba(188, 222, 136, 0.72);
--roots-color-glow:   rgba(220, 255, 176, 0.46);
--roots-intensity:    0.60;

/* ── Surfaces — neutral charcoal, no pure black ── */
--background:    #141418;
--surface-low:   #18181d;
--surface-mid:   #202026;
--surface-high:  #292930;
--separator:     #34343e;

/* ── Text — warm off-white on neutral charcoal ── */
--text-primary:   #f4f4f6;
--text-secondary: #c6c6d0;
--text-muted:     #a5a5b2;
--text-accent:    #d4ff8a;
--text-disabled:  #72727e;

/* ── Buttons — layered charcoal fills with clear hover/press ── */
--button-normal:  #18181d;
--button-hover:   #292930;
--button-pressed: #101014;
--button-text:    #f4f4f6;
--button-padding-h: 14;
--button-padding-v: 7;
--button-height:    30;

/* Outlined editor buttons change fill on hover and keep their geometry steady. */

/* ── Accents — cool mint primary ── */
--accent-primary: #c9ff65;
--accent-success: rgba(72, 180, 100, 0.90);
--accent-warning: rgba(220, 160, 60, 0.90);
--accent-error:   rgba(220, 80, 80, 0.90);
--accent-neural:  rgba(155, 137, 208, 0.30);

/* Subtle living-network detail in otherwise empty editor space. */
--sparkle-primary:      #88dbcf;
--sparkle-secondary:    #c4b5ee;
--sparkle-glow:         rgba(136, 219, 207, 0.24);
--sparkle-neural:       rgba(155, 137, 208, 0.16);
--sparkle-hyphae:       rgba(114, 203, 189, 0.10);
--sparkle-count:        48;
--synapse-count:        12;
--neural-branch-count:  18;

/* ── Input ── */
--input-bg:       #111115;
--input-border:   #454550;
--input-focus:    #c9ff65;
--selection-bg:   rgba(201, 255, 101, 0.23);

/* ── Code editor syntax palette ── */
--code-keyword: #c4b5ee;
--code-type:    #88dbcf;
--code-string:  #e9c79d;
--code-comment: #9da8aa;
--code-number:  #c4b5ee;

/* ── Keyboard focus ring ── */
--focus-ring-color:  #c9ff65;
--focus-ring-width:  2;
--focus-ring-offset: 2;

/* ── Node canvas ── */
--canvas-bg:      #111115;
--canvas-grid:    rgba(196, 181, 238, 0.08);
--node-default:   #1c1c22;
--node-selected:  #293e3c;
--node-edge:      rgba(201, 255, 101, 0.78);

/* ── Panel chrome — soft rim + catch-light ── */
--panel-border:     #454550;
--panel-highlight:  rgba(255, 255, 255, 0.02);

/* ── Per-control chrome — subtle professional depth ── */
--chrome-glow-enabled:    0;
--chrome-glow-side:         top;
--chrome-glow-color:      rgba(255, 255, 255, 0.06);
--chrome-glow-size:         1;
--chrome-glow-intensity:    1;
--chrome-shadow-enabled:    0;
--chrome-shadow-side:       bottom;
--chrome-shadow-color:      rgba(0, 0, 0, 0.35);
--chrome-shadow-offset:     2;
--chrome-shadow-blur:       4;

/* ── Scrollbar ── */
--scrollbar-width:  8;
--scrollbar-radius: 4;
--scrollbar-track: #141418;
--scrollbar-thumb: #555560;
--scroll-panel-padding: 6;
--scroll-panel-scrollbar-inset: 2;

/* ── Progress ── */
--progress-bg:     #25252d;
--progress-fill:   #c9ff65;
--progress-height: 16;
--progress-radius: 8;

/* ── Spinner ── */
--spinner-color: #c9ff65;
--spinner-size:  24;
--spinner-speed: 1.2;

/* ── Toggle / Checkbox ── */
--toggle-on:      #c9ff65;
--toggle-off:     #111115;
--toggle-check:   #141418;
--toggle-border:  #555560;
--toggle-border-width: 1;
--toggle-size:    18;
--toggle-radius:  5;
--checkbox-gap:   8;

/* Foldouts keep section hierarchy visible without relying on colour alone. */
--foldout-header-height:     28;
--foldout-header-padding-h: 10;
--foldout-padding:           6;
--foldout-indent:           12;
--foldout-gap:               4;
--foldout-content-gap:       6;
--foldout-margin-top:        4;
--foldout-chevron-gap:       6;
--foldout-title-size:       13;
--foldout-title:            #f4f4f6;
--foldout-header-normal:    #202026;
--foldout-header-hover:     #292930;
--foldout-content-bg:       #18181d;

/* ── Slider ── */
--slider-track:        rgba(255, 255, 255, 0.08);
--slider-fill:         #c9ff65;
--slider-thumb:        #f4f4f6;
--slider-height:       22;
--slider-track-height: 4;
--slider-thumb-size:   16;
--slider-thumb-radius: 8;
--slider-track-radius: 2;

/* ── Image ── */
--image-bg:     rgba(0, 0, 0, 0);
--image-radius: 0;

/* ── Pickers ── */
--datepicker-bg:      #18181d;
--datepicker-accent:  #c9ff65;
--datepicker-text:    #f4f4f6;
--datepicker-border:  #454550;
--datepicker-height:  28;
--colorpicker-width:  200;
--colorpicker-inline-height: 24;
--colorpicker-popup-height: 160;
--number-spinner-height: 26;

/* ── Carousel / Pagination ── */
--carousel-dot:        #6e6e7a;
--carousel-dot-active: #c9ff65;
--carousel-nav:        #202026;
--pagination-active:   #c9ff65;
--pagination-btn:      #202026;

/* ── Hold button ── */
--hold-ring:       #c9ff65;
--hold-ring-track: rgba(255, 255, 255, 0.10);
--hold-duration:   0.8;

/* ── Tabs ── */
--tab-bar-bg:         #111115;
--tab-inactive:       #18181d;
--tab-hover:          #292930;
--tab-active:         #24212c;
--tab-text:           #b8b8c4;
--tab-text-active:    #f4f4f6;
--tab-border-active:  #c9ff65;
--tab-height:         32;
--tab-padding-h:      16;
--tab-min-width:      64;
--tab-active-line:    2;
--tab-radius:         6;
--tab-first:          6;
--tab-last:           6;
--tab-center:         6;
--tab-inset-v:          3;
--tab-inset-h:          0;

/* ── Toolbar / status chrome ── */
--menubar-height:          28;

/* ── Window chrome ── */
--window-titlebar-height:      32;
--window-titlebar-padding-h:   10;
--window-titlebar-gap:         8;
--window-title-size:           14;
--window-title-color:          #f4f4f6;
--window-titlebar-bg:          #18181d;
--window-button-size:          28;
--window-button-gap:           4;
--window-button-radius:        14;
--window-button-normal:        rgba(255, 255, 255, 0);
--window-button-hover:         rgba(255, 255, 255, 0.08);
--window-button-pressed:       rgba(255, 255, 255, 0.04);
--window-button-icon:          #c6c6d0;
--window-button-icon-hover:    #ffffff;
--window-close-hover:          rgba(220, 80, 80, 0.85);
--window-content-gap:          0;
--window-content-padding-h:    10;
--window-content-padding-v:    8;
--window-content-inner-gap:    6;
--window-default-width:        560;
--window-default-height:       560;
--toolbar-height:          40;
--toolbar-padding-h:       12;
--toolbar-padding-v:       8;
--stats-bar-height:        32;
--stats-bar-padding-h:     12;
--stats-bar-padding-v:     6;
--stats-diag-gap:          10;
--stats-fps-state-width:   72;
--stats-fps-value-width:   112;
--console-toolbar-height:  40;
--console-row-height:      22;
--console-padding-h:       12;

/* ── Resize handle ── */
--resize-handle:       rgba(255, 255, 255, 0.12);
--resize-handle-hover: #c9ff65;
--resize-size:         6;

/* ── Sizing & typography ── */
--font-family:      Figtree;
--font-size-xs:     12;
--font-size-sm:     14;
--font-size-md:     16;
--font-size-lg:     19;
--form-row-hint-size: 12;
--border-radius:    3;
--border-radius-sm: 2;

/* ── Editor delete button (compact destructive icon) ── */
.delete-button {
  color: var(--accent-error);
  autosize: false;
  font-size: 11;
  min-height: 22;
  border-radius: var(--border-radius-sm);
}

/* ── Editor close button (compact dismiss icon) ── */
.close-button {
  color: var(--text-secondary);
  autosize: false;
  font-size: 13;
  min-width: 26;
  min-height: 26;
  max-width: 26;
  max-height: 26;
  border-radius: var(--border-radius-sm);
}

/* ── Sounds ── */
--ui-click-sound: ui_click;
--ui-hover-sound: ui_hover;