/* Backbone tokens: SINGLE SOURCE. Spec §1 + §11.2. Edit here only (Loupe). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500&display=swap');

:root {
  /* color */
  --bb-bg:        #0B0B0A;  /* page ground */
  --bb-raise:     #171715;  /* pressed row / input fill. Never a card */
  --bb-fg:        #E8E6E1;  /* primary text, icons */
  --bb-muted:     #A3A097;  /* secondary text, meta, labels */
  --bb-control:   #77746C;  /* control borders, slider track, inactive beats */
  --bb-line:      #4A4842;  /* decorative frame rules ONLY (not a control edge) */
  --bb-disabled:  #6A6862;  /* disabled text/icon */
  /* palette tokens: default = ocean. Only these 9 change per palette (§11) */
  --bb-accent:         #01C5FF;  /* primary action + active state ONLY */
  --bb-accent-pressed: #01C5FF;  /* same hue; pressed = inset outline */
  --bb-beat-down:      var(--bb-accent);
  --bb-beat:           #4E96FF;  /* beat indicator only */
  --bb-beat-accented:  #4CABFD;  /* beat indicator only */
  --bb-beat-idle:      var(--bb-control);
  --bb-flash:          #01C5FF;
  --bb-flash-edge:     #01C5FF;
  --bb-on-accent: #0B0B0A;  /* text/icon on accent */
  --bb-error:     #FF6A5C;  /* error text + glyph ONLY; per-palette override, §11 */

  /* type */
  --bb-font-sans: 'Space Grotesk', system-ui, sans-serif;
  --bb-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --bb-size-label: 14px;   /* mono, lowercase */
  --bb-size-body:  16px;   /* sans */
  --bb-size-title: 24px;   /* sans */
  --bb-size-tempo: 112px;  /* mono, 390 viewport; 160px ≥ 1120 */
  --bb-weight-regular: 400;
  --bb-weight-medium:  500;

  /* space: 4/8 scale. These are the only legal values */
  --bb-s1: 4px;  --bb-s2: 8px;  --bb-s3: 12px; --bb-s4: 16px;
  --bb-s6: 24px; --bb-s8: 32px; --bb-s12: 48px; --bb-s16: 64px;

  /* size */
  --bb-hit: 48px;          /* every interactive target */
  --bb-hit-primary: 64px;  /* play/stop only */
  --bb-rule: 1px;
  --bb-focus: 2px;
  --bb-bracket: 8px;
  --bb-maxw: 1120px;

  /* motion */
  --bb-dur-fast: 80ms;     /* press feedback */
  --bb-dur-base: 160ms;    /* state change (switch, toggle, toast in) */
  --bb-dur-flash: 90ms;    /* beat flash decay */
  --bb-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --bb-ease-in:  cubic-bezier(0.4, 0, 1, 1);

  /* safe area */
  --bb-safe-t: env(safe-area-inset-top, 0px);
  --bb-safe-b: env(safe-area-inset-bottom, 0px);
  --bb-safe-l: env(safe-area-inset-left, 0px);
  --bb-safe-r: env(safe-area-inset-right, 0px);
}
@media (min-width: 1120px) { :root { --bb-size-tempo: 160px; } }
* { border-radius: 0 !important; box-shadow: none !important; }

/* palettes (§11.2) */
html[data-palette="ocean"]{--bb-accent:#01C5FF;--bb-accent-pressed:#01C5FF;--bb-on-accent:#0B0B0A;--bb-beat:#4E96FF;--bb-beat-accented:#4CABFD;--bb-flash:#01C5FF;--bb-flash-edge:#01C5FF;--bb-error:#FF6A5C}
html[data-palette="amber"]{--bb-accent:#FFA61A;--bb-accent-pressed:#FFA61A;--bb-on-accent:#0B0B0A;--bb-beat:#CA7D44;--bb-beat-accented:#F49752;--bb-flash:#FFA61A;--bb-flash-edge:#FFA61A;--bb-error:#F6DAED}
html[data-palette="sunset"]{--bb-accent:#FE626E;--bb-accent-pressed:#FE626E;--bb-on-accent:#0B0B0A;--bb-beat:#FFC573;--bb-beat-accented:#FFE296;--bb-flash:#FE626E;--bb-flash-edge:#FE626E;--bb-error:#F6DAED}
html[data-palette="neon"]{--bb-accent:#B4FF33;--bb-accent-pressed:#B4FF33;--bb-on-accent:#0B0B0A;--bb-beat:#40FFB6;--bb-beat-accented:#00D3FF;--bb-flash:#B4FF33;--bb-flash-edge:#B4FF33;--bb-error:#FF6A5C}
html[data-palette="aurora"]{--bb-accent:#FF38AB;--bb-accent-pressed:#FF38AB;--bb-on-accent:#0B0B0A;--bb-beat:#B585E2;--bb-beat-accented:#4DA6E9;--bb-flash:#FF38AB;--bb-flash-edge:#FF38AB;--bb-error:#FF6A5C}
html[data-palette="fire"]{--bb-accent:#FF4D2A;--bb-accent-pressed:#FF4D2A;--bb-on-accent:#0B0B0A;--bb-beat:#F55591;--bb-beat-accented:#FFB245;--bb-flash:#FF4D2A;--bb-flash-edge:#FF4D2A;--bb-error:#FFB3A6}
html[data-palette="prism"]{--bb-accent:#00C1EB;--bb-accent-pressed:#00C1EB;--bb-on-accent:#0B0B0A;--bb-beat:#C472ED;--bb-beat-accented:#F4505A;--bb-flash:#00C1EB;--bb-flash-edge:#00C1EB;--bb-error:#FFB3A6}