/*
 * Look A, Bench Instrument. Warm gray hardware, one signal orange, a dark faceplate.
 * Tokens plus a few shapes. Structure lives in styles.css.
 */

html[data-skin="bench"] {
  --ground: #ECEAE4;
  --surface: #F7F6F2;
  --surface-2: #FFFFFF;
  --ink: #18181A;
  --muted: #5E5B55;
  --line: #D3D0C8;
  --accent: #C2410C;
  --on-accent: #FFFFFF;
  --deck: #1C1D1F;
  --deck-ink: #F2F1EC;
  --deck-muted: #A8A69F;
  --deck-line: #36383C;
  --key: #2C2D30;
  --key-ink: #F7F6F2;
  --key-ring: #F97316;
  --mark: #77756F;
  --mark-hot: #F97316;
  --radius: 26px;
  --radius-sm: 14px;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --backdrop: #DAD7CF;
}

html[data-skin="bench"][data-theme="dark"] {
  --ground: #141516;
  --surface: #1E2022;
  --surface-2: #232527;
  --ink: #F2F1EC;
  --muted: #A8A69F;
  --line: #36383C;
  --accent: #F97316;
  --on-accent: #1A0B02;
  --deck: #0C0D0E;
  --deck-line: #2C2E31;
  --key: #232527;
  --backdrop: #0A0A0B;
}

/* The LCD strip: a pale green-gray readout set into the dark faceplate. */
html[data-skin="bench"] .tape-wrap { margin: 10px 10px 0; height: 44px; border-radius: 10px; background: #D8DBCF; border: 0; box-shadow: inset 0 2px 5px rgb(0 0 0 / .28); overflow: hidden; }
html[data-skin="bench"] .tape i { background: #9DA190; }
html[data-skin="bench"] .tape i[data-received] { background: #2A2C24; }
html[data-skin="bench"] .tape i[data-hot] { background: #C2410C; box-shadow: none; }
html[data-skin="bench"] .glyph::before, html[data-skin="bench"] .tape-empty { color: #55584B; }
html[data-skin="bench"] .glyph[data-hot]::before { color: #C2410C; }
html[data-skin="bench"] .scope path { stroke: #7C8070; }
html[data-skin="bench"] .scope path.live { stroke: #C2410C; }

/* A machined key with a small orange index dot, and a speaker grille behind it. */
html[data-skin="bench"] .key-stage {
  background-image: radial-gradient(circle, rgb(255 255 255 / .09) 1.2px, transparent 1.6px);
  background-size: 11px 11px; background-position: center;
}
html[data-skin="bench"] .key-cap { background: radial-gradient(circle at 50% 28%, #3A3C40, #232427 70%); }
html[data-skin="bench"] .key-label, html[data-skin="bench"] .slider span { letter-spacing: .18em; }