/* Backwerd Rhythm Shop interface foundation — Staff Spot dark treatment.
   The :root block below is copied verbatim from the shipped Mallet Map
   brs-theme.css (Suite Visual Unification, Aug 2026) rather than re-typed, so
   the two dark apps cannot drift. Product-local drawing — the staff, noteheads,
   ledger lines, clefs — stays in styles.css.

   Staff Spot's taxonomy group is Read & Build Rhythm, whose category accent is
   Forest. Brick stays on primary actions and Terra on instructional emphasis,
   matching the semantic roles Mallet Map shipped in v1.18.1. */
:root {
  --brs-ink: #171717;
  --brs-ink-lifted: #232320;
  --brs-ink-raised: #2e2c28;
  --brs-warm-white: #fafaf9;
  --brs-tan: #d2b48c;
  --brs-brick: #8b3a3a;
  --brs-forest: #567d46;
  --brs-forest-light: #7ca368;
  --brs-terra: #e2725b;
  --brs-focus: #78aefc;
  --brs-error: #ff7b75;
  --brs-space-1: 4px;
  --brs-space-2: 8px;
  --brs-space-3: 12px;
  --brs-space-4: 16px;
  --brs-space-5: 24px;
  --brs-space-6: 32px;
  --brs-space-7: 48px;
  --brs-radius-sm: 8px;
  --brs-radius-md: 12px;
  --brs-radius-lg: 20px;
  --brs-shadow-panel: 0 14px 36px rgba(0, 0, 0, .28);
  --brs-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --brs-body: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;

  /* Compatibility aliases used by the app's product-local styles. */
  --bg: var(--brs-ink);
  --panel: var(--brs-ink-lifted);
  --panel-2: var(--brs-ink-raised);
  --line: #4b4841;
  --text: var(--brs-warm-white);
  --muted: #c4b9aa;
  --accent: var(--brs-brick);
  --accent-soft: rgba(139, 58, 58, .24);
  --on-accent: var(--brs-warm-white);
  --good: var(--brs-forest-light);
  --good-soft: rgba(86, 125, 70, .22);
  --bad: var(--brs-error);
  --bad-soft: rgba(139, 58, 58, .26);
  --shadow: var(--brs-shadow-panel);
  --radius: var(--brs-radius-lg);
}
html { background: var(--brs-ink); }

body {
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(210, 180, 140, .10), transparent 62%),
    radial-gradient(800px 440px at 95% 0%, rgba(226, 114, 91, .08), transparent 58%),
    var(--brs-ink);
  color: var(--brs-warm-white);
  font-family: var(--brs-body);
  font-size: clamp(16px, 1.2vw, 18px);
  letter-spacing: .01em;
}

h1, h2, h3 {
  font-family: var(--brs-display);
  font-weight: 800;
  letter-spacing: .025em;
}