/* Inside the `dreamdesk` cascade layer, so any unlayered app CSS overrides it
   regardless of specificity. Apps with global resets should layer them first:
   @layer reset, dreamdesk; */
@layer dreamdesk {

/* Dark Theme Semantic Color Overrides */
html[data-theme="dark"] {
  background-color: var(--black);
  color: var(--dark-toxic-green);
  /* Dark Theme Colors */
  --dark-toxic-green: #3ff10b;
  
  /* Semantic Color System - Dark Theme Mapping */
  --color-primary: var(--dark-toxic-green);
  --color-secondary: var(--dark-toxic-green);
  --color-accent: var(--dark-toxic-green);
  --color-tertiary: var(--dark-toxic-green);
  --color-background: var(--black);
  --color-surface: var(--black);
  --color-text: var(--dark-toxic-green);
  --color-text-muted: var(--dark-toxic-green);
  --color-border: rgba(58, 255, 0, 0.86);
  
  /* Interactive States */
  --color-hover: var(--dark-toxic-green);
  --color-active: var(--dark-toxic-green);
  --color-disabled: var(--dark-toxic-green);
  --color-error: var(--dark-toxic-green);
  --color-success: var(--dark-toxic-green);
  --color-warning: var(--dark-toxic-green);
  
  /* UI Component Colors */
  --color-button-primary: var(--black);
  --color-button-secondary: var(--black);
  --color-button-ghost: var(--black);
  --color-button-help: var(--black);
  --color-button-disable: var(--black);
  
  --color-window-header: var(--black);
  --color-window-body: var(--black);
  --color-window-border: 1px solid rgba(58, 255, 0, 0.81);
  /* Resize grip color = dark theme border accent */
  --resize-stripe-color: var(--dark-toxic-green);
  
  --color-input-background: var(--black);
  --color-input-border: var(--dark-toxic-green);
  --color-input-focus: var(--dark-toxic-green);
  
  --color-toast-alert: var(--black);
  --color-toast-notification: var(--black);
  --color-toast-warning: var(--black);
  
  --color-progress-track: var(--black);
  --color-progress-bar: var(--dark-toxic-green);
  --color-progress-segment: var(--dark-toxic-green);
  --color-progress-gradient: var(--dark-toxic-green);
  
  --color-toggle-background: var(--black);
  --color-toggle-knob: var(--dark-toxic-green);
  --color-toggle-active: var(--dark-toxic-green);
  
  --color-terminal-bg: #000000;
  --color-terminal-fg: #3ff10b;
  
  /* Scroll styles */
  --scroll-track-bg: #1a1a1a;
  --scroll-thumb-bg: var(--dark-toxic-green);
  --scroll-thumb-shadow-light: #2a2a2a;
  --scroll-thumb-shadow-dark: #000000;
  --scroll-thumb-hover-shadow: var(--dark-toxic-green);
  --scroll-button-bg: #2a2a2a;
  --scroll-button-shadow-light: #3a3a3a;
  --scroll-button-shadow-dark: #1a1a1a;
  --scroll-arrow-color: #ffffff;

  /* Visual Depth Tokens */
  --window-shadow: -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3), 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2), 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1), inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4), inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3), inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);
  --window-header-shadow: -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3), 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2), 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1), inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4), inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3), inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);
  --window-controls-button-shadow: var(--window-header-shadow);
  --toast-shadow: var(--window-header-shadow);
  --progress-track-shadow: var(--window-header-shadow);
  --progress-bar-shadow: none;
  --toggle-slider-shadow: none;
  --toggle-knob-shadow: none;
  --input-shadow: none;

  /* Control button icons */
  --btn-minimize-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><line x1='7' y1='30' x2='27' y2='30' style='stroke:%233ff10b;stroke-width:7' /></svg>");
  --btn-fullscreen-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><rect width='30' height='30' x='10' y='10' style='fill:%23242426;stroke-width:3;stroke:%233ff10b' /><line x1='9' y1='14' x2='41' y2='14' style='stroke:%233ff10b;stroke-width:7' /></svg>");
  --btn-close-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewBox='0 0 40 40'><path d='M10,10 L30,30 M30,10 L10,30' stroke='%233ff10b' stroke-width='5' stroke-linecap='butt'/></svg>");
}

body {
  overflow-x: hidden;
  /* background-color: var(--black); */
  /* color: var(--dark-toxic-green); */
}

/* Windows styles */
.bl-win {
  background-color: var(--black);
  color:  #3ff10b;
  border: 1px solid rgba(58, 255, 0, 0.86);
  box-shadow: 
    -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
    0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
    0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
    inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
    inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
    inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);
}

.bl-win-content {
  background-color: var(--black);
  color: var(--dark-toxic-green); 
  border: 1px solid rgba(58, 255, 0, 0.81);
}

.bl-win-header {
  background-color: var(--black);
  color: var(--dark-toxic-green);
  border: 1px solid rgba(58, 255, 0, 0.81);
  box-shadow: 
    -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
    0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
    0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
    inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
    inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
    inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);

}

.bl-win-controls button {
  width: 1.4rem;
  height: 1.3rem;
  background-color: var(--black);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  background-size: cover;
  border: 1px solid var(--dark-toxic-green);
  
}

.bl-btn--minimize {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><line x1='7' y1='30' x2='27' y2='30' style='stroke:%233ff10b;stroke-width:7' /></svg>");
}

.bl-btn--fullscreen {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><rect width='30' height='30' x='10' y='10' style='fill:%23242426;stroke-width:3;stroke:%233ff10b' /><line x1='9' y1='14' x2='41' y2='14' style='stroke:%233ff10b;stroke-width:7' /></svg>");
}

.bl-btn--close {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewBox='0 0 40 40'><path d='M10,10 L30,30 M30,10 L10,30' stroke='%233ff10b' stroke-width='5' stroke-linecap='butt'/></svg>");
}

.bl-btn--primary {
  color: var(--dark-toxic-green);
  border: 1px solid var(--dark-toxic-green);
  background-color: var(--black);
  box-shadow: 
    -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
    0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
    0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
    inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
    inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
    inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);
}

.bl-btn--ghost {
  color: var(--dark-toxic-green);
  border: 1px solid var(--dark-toxic-green);
  background-color: var(--black);
  box-shadow: 
    -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
    0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
    0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
    inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
    inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
    inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);
}

.bl-btn--help {
  color: var(--dark-toxic-green);
  border: 1px solid var(--dark-toxic-green);
  background-color: var(--black);
  box-shadow: 
    -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
    0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
    0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
    inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
    inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
    inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);
}


.bl-toggle input:checked + .slider {
  background-color: var(--black);
  transition: transform 6.3s ease;
  border: 1px solid var(--dark-toxic-green);
}


  /* Toggle styles */
.bl-toggle input:checked + .slider .knob {
  background-color: var(--dark-toxic-green);
  transition: transform 6.3s ease;
  border: 1px solid var(--dark-toxic-green);
  box-shadow: 
    -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
    0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
    0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
    inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
    inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
    inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);
}
/* Toast styles */
.bl-toast {
  background-color: var(--black);
  color: var(--dark-toxic-green);
  border: 1px solid var(--dark-toxic-green);
}


/* Input styles */
html[data-theme="dark"] .dreamdesk-input {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
}

.bl-toast-btn--close {
  border: 1px solid var(--dark-toxic-green);
}

/* Toast styles */
.bl-toast-alert {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
  box-shadow: 
  -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
  0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
  0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
  inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
  inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
  inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);

}

.bl-toast-notification {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
  box-shadow: 
  -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
  0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
  0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
  inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
  inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
  inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);

}

.bl-toast-warning {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
  box-shadow: 
  -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.3),
  0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.2),
  0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.1),
  inset -0.5px -0.5px 5px 0.5px rgba(63, 241, 11, 0.4),
  inset 0.5px 0.2px 5px 0.5px rgba(63, 241, 11, 0.3),
  inset 0.5px 0.5px 9px 0.5px rgba(58, 255, 0, 0.2);

}

.toast-btn--close {
  color: var(--dark-toxic-green);
}


/* Progress bar styles */
.bl-progress-bar {
  background-color: #3ff10b;
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
}

.bl-progress-bar--gradient {
  background: var(--pc-pink-mint-gradient);
  transition: width 0.5s ease, filter 0.5s linear;
}

.bl-progress-track {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
}

.bl-progress-segment {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
}

.bl-progress-segment--gradient {
  background-image: var(--pc-pink-mint-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.bl-tabs {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
}

.bl-tab-panels {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
}



/* Terminal window styles */
.bl-terminal-win {
  background-color: var(--black);
  border: 1px solid var(--dark-toxic-green);
  color: var(--dark-toxic-green);
}

 /* scrollbar styles */
.bl-scroll::-webkit-scrollbar {
  width: 1.4rem;
}

.bl-scroll::-webkit-scrollbar-track {
  background: var(--scroll-track-bg);
  border: 1px solid var(--dark-toxic-green);
}

  .bl-scroll::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-bg);
  background-size: 300% 300%;
  border: 1px solid var(--dark-toxic-green);
  box-shadow: inset -2px 2px 1px var(--scroll-thumb-shadow-light),
    inset 2px -2px 1px var(--scroll-thumb-shadow-dark);
}

.bl-scroll::-webkit-scrollbar-thumb:hover {
  box-shadow: inset -2px 2px 1px var(--scroll-thumb-shadow-light),
    inset 2px -2px 1px var(--scroll-thumb-hover-shadow);
}

 .bl-scroll::-webkit-scrollbar-button:vertical:decrement {
border: 1px solid var(--dark-toxic-green);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="%233ff10b" d="M12 8l6 6H6z"/></svg>');
}

.bl-scroll::-webkit-scrollbar-button:vertical:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="%233ff10b" d="M12 16l-6-6h12z"/></svg>');
}

.bl-scroll::-webkit-scrollbar-button {
  background-color: var(--scroll-button-bg);
  border: 1px solid var(--dark-toxic-green);
  box-shadow: inset -2px 2px 1px var(--scroll-button-shadow-light),
    inset 2px -2px 1px var(--scroll-button-shadow-dark);
}

.bl-scroll::-webkit-scrollbar-button:vertical:increment:start,
.bl-scroll::-webkit-scrollbar-button:vertical:decrement:end {
  display: none;
  border: none;
}

/* Firefox support */
@-moz-document url-prefix() {
  [data-theme="dark"] .bl-scroll {
      scrollbar-width: thin;
      scrollbar-color: var(--scroll-thumb-bg) var(--scroll-track-bg);
  }
}

.bl-scroll {
  color: var(--dark-toxic-green);
}

} /* @layer dreamdesk */