/* ============================================================
   Riddim Lab — shared design tokens
   Loaded by every page in the lab before its own stylesheet.
   ============================================================ */

:root {
  --slate:         #15121d;
  --slate-panel:   #1d1830;
  --slate-raised:  #281f3d;

  --cloud:         #f4f1fb;

  --violet:        #8b5cf6;
  --violet-bright: #c4b5fd;
  --violet-deep:   #5b21b6;
  --violet-muted:  #9d8cc9;

  --cyan:          #34e0e8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:where(a, button, input, select):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}