/* Buraq — AI Workspace
   Design tokens. Two palettes (dark default, light alternative), each
   built with the same method: one primary (buttons/focus/accents), a
   neutral scale derived from the base hue at low saturation (10%
   lightness steps), and a distinct success/warning/error notification
   triad — never reusing the primary for status colors. Switch with
   [data-theme="light"] on the root; toggled and persisted in app.js. */

:root {
  --base: #0C0118;
  --elevated: #0F0520;
  --raised: #150A28;
  --text: #EDEAF3;
  --text-secondary: #9B96B0;
  --text-tertiary: #5C5670;
  --accent: #CAB29A;
  --accent-hover: #DCC6B0;
  --success: #4ADE94;
  --warning: #F0B057;
  --destructive: #EA1919;
  --hairline: rgba(255,255,255,.09);
  --hairline-strong: rgba(255,255,255,.14);
  --hairline-soft: rgba(255,255,255,.06);
  --row-hover: rgba(255,255,255,.025);
  --accent-wash: rgba(202,178,154,.08);
  --accent-wash-soft: rgba(202,178,154,.05);
  --accent-border: rgba(202,178,154,.35);
  --success-wash: rgba(74,222,148,.08);
  --success-border: rgba(74,222,148,.35);
  --warning-wash: rgba(240,176,87,.08);
  --warning-border: rgba(240,176,87,.35);
  --destructive-wash: rgba(234,25,25,.07);
  --destructive-border: rgba(234,25,25,.35);
  --grid-line: rgba(255,255,255,.022);
  --scrollbar-thumb: rgba(255,255,255,.10);
  --control-knob-off: rgba(255,255,255,.3);
}

:root[data-theme="light"] {
  --base: #FAF8F4;
  --elevated: #FFFFFF;
  --raised: #F1E9DC;
  --text: #1C1710;
  --text-secondary: #6B6255;
  --text-tertiary: #9B9284;
  --accent: #A87C4F;
  --accent-hover: #8F6740;
  --success: #1F8F53;
  --warning: #B4740C;
  --destructive: #C4271A;
  --hairline: rgba(28,23,16,.10);
  --hairline-strong: rgba(28,23,16,.16);
  --hairline-soft: rgba(28,23,16,.07);
  --row-hover: rgba(28,23,16,.03);
  --accent-wash: rgba(168,124,79,.09);
  --accent-wash-soft: rgba(168,124,79,.05);
  --accent-border: rgba(168,124,79,.4);
  --success-wash: rgba(31,143,83,.09);
  --success-border: rgba(31,143,83,.35);
  --warning-wash: rgba(180,116,12,.09);
  --warning-border: rgba(180,116,12,.35);
  --destructive-wash: rgba(196,39,26,.08);
  --destructive-border: rgba(196,39,26,.35);
  --grid-line: rgba(28,23,16,.035);
  --scrollbar-thumb: rgba(28,23,16,.14);
  --control-knob-off: rgba(28,23,16,.32);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--base);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

#app { min-height: 100vh; background: var(--base); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

@keyframes bqspin { to { transform: rotate(360deg); } }
@keyframes bqblink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes bqbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

.bqsc::-webkit-scrollbar { width: 8px; height: 8px; }
.bqsc::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
.bqsc::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: 'JetBrains Mono', monospace; }

/* Generic hover helpers used by delegated event listeners */
[data-hover-bg]:hover { background: var(--_hover-bg, var(--row-hover)); }

/* Toast / error banner */
.bq-toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  background: var(--elevated); border: 1px solid var(--destructive-border);
  color: var(--text); font: 400 12px 'Space Grotesk'; padding: 12px 16px;
  border-radius: 3px; max-width: 340px; box-shadow: none;
}

/* Responsive: below ~1200px collapse the rail by default;
   below ~1000px the artifact panel becomes an overlay. */
@media (max-width: 1200px) {
  .bq-rail.is-open { width: 54px !important; }
}
@media (max-width: 1000px) {
  .bq-artifact-panel {
    position: fixed !important; right: 0; top: 0; bottom: 0; z-index: 80;
  }
}