/*
 * ribbon.fm — design tokens
 * Tune the whole palette from here.
 */
:root {
  /* ── surfaces ─────────────────────────────────────────── */
  --bg:           #fafafa;
  --surface:      #ffffff;
  --border:       #ececec;
  --border-soft:  #f3f3f3;

  /* ── 3D strip ─────────────────────────────────────────── */
  --strip:        #111111;  /* Möbius surface color */
  --strip-grid:   #2a2a2a;  /* step boundaries etched on the strip */

  /* ── accents ──────────────────────────────────────────── */
  --accent:       #00d66a;  /* notes, indicators, interactive */
  --accent-soft:  rgba(0, 214, 106, 0.16);
  --accent-glow:  rgba(0, 214, 106, 0.45);

  --playhead:     #ff2e6f;  /* magenta — playhead ONLY */

  /* ── text ─────────────────────────────────────────────── */
  --text:         #0a0a0a;
  --text-dim:     #6a6a70;
  --text-hint:    #9a9aa0;

  /* ── type ─────────────────────────────────────────────── */
  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:  10.5px;
  --fs-sm:  11.5px;
  --fs-md:  13px;
  --fs-lg:  15px;
  --fs-xl:  18px;

  --ls-wide: 0.12em;  /* labels, eyebrows */
  --ls-tight: -0.01em;

  /* ── shape ────────────────────────────────────────────── */
  --radius:   2px;
  --radius-0: 0;
  --hairline: 1px;
}