/* The playground's own stylesheet uses these variable names; html:root
   outranks its :root, so this file wins whatever order they load in. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

html:root {
  --bg: #0a0907;
  --bg-1: #100f0d;
  --bg-2: #161412;
  --bg-3: #1b1916;
  --border: rgba(255, 248, 230, 0.07);
  --border-md: rgba(255, 248, 230, 0.13);
  --v: #d4a03c;
  --vl: #e8b84e;
  --vd: #7a5a1e;
  --rose: #c8453f;
  --rose-l: #e0706a;
  --rose-glow: rgba(208, 82, 77, 0.35);
  --text: #f0ebe0;
  --text-2: #8a8070;
  --text-3: #6a6356;
  --gold: #e8b84e;
  --green: #3d9e5c;
  --amber: #d4a03c;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --code: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
  color-scheme: dark;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-size: 128px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Run: never a filled amber button - dark ground, amber edge, a glow that stays lit. */
html .run-btn {
  background: #161412;
  color: #f0ebe0;
  border: 1px solid #d4a03c;
  box-shadow: 0 0 8px rgba(212, 160, 60, 0.55), 0 0 20px rgba(212, 160, 60, 0.25), 0 0 40px rgba(212, 160, 60, 0.1);
}
html .run-btn:hover {
  background: #1b1916;
  border-color: #e8b84e;
  box-shadow: 0 0 10px rgba(212, 160, 60, 0.75), 0 0 28px rgba(212, 160, 60, 0.4), 0 0 55px rgba(212, 160, 60, 0.18);
}
html .run-btn.running { border-color: rgba(208, 82, 77, 0.6); box-shadow: none; }

/* Extension badges replace the old emoji icons. */
html .file-icon, html .tab-icon {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--v);
  min-width: 26px;
  text-align: center;
  padding: 3px 4px;
  border-radius: 4px;
  background: rgba(212, 160, 60, 0.08);
  box-shadow: inset 0 0 0 1px rgba(212, 160, 60, 0.22);
}

/* Status bar: accent is an edge, never a full-width fill. */
html #status-bar { background: #100f0d; box-shadow: inset 0 1px 0 rgba(212, 160, 60, 0.45); }
html .status-item { color: #8a8070; border-right-color: rgba(255, 248, 230, 0.07); }
html #st-lang { color: #e8b84e; }
html .status-err-item { color: #e0706a; }

html :focus-visible { outline: 2px solid #d4a03c; outline-offset: 2px; }