/* Groove Bank — design tokens only. Nothing but :root lives in this file.
   Every colour, radius and size used anywhere else comes from here.
   Dark by default: this is used in a car at night and in dim rehearsal rooms. */

:root {
  /* Surfaces */
  --bg:             #12141a;
  --surface:        #1b1e27;
  --surface-raised: #252936;
  --border:         #343a4b;

  /* Text */
  --text:      #eef1f7;
  --text-dim:  #9aa3b8;

  /* Brand / interactive */
  --accent:     #ffb03a;
  --accent-dim: #7a5518;
  --danger:     #e5484d;

  /* Step grid */
  --cell-off:    #2b3040;
  --cell-hit:    #6fa8dc;
  --cell-accent: #ffb03a;
  --beat-shade:  #1f2330;
  --playhead:    #313a52;

  /* Grid geometry. A step cell is the one place --tap-min cannot hold: sixteen
     steps at 56px is 896px of bar, so the width shrinks and the height does not.
     34px puts exactly half a bar on a 375px screen, and the grid is the app's
     single sanctioned horizontal scroller. See DESIGN.md §11. */
  --cell-w:        34px;
  --cell-h:        56px;
  --grid-label-w: 100px;
  --ruler-h:       26px;

  /* Geometry */
  --tap-min: 56px;
  --radius:  12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Type — body never below 18px; users skew older and this is read at arm's length */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --text-body:  18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-small: 15px;
  /* One step above --text-xl, and used in exactly one place: the pattern name on
     a flashcard, which is read from further away than anything else here - the
     phone is propped on a stand or a music desk, not held. */
  --text-huge:  34px;

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap:    16px;
  --gap-lg: 24px;
}