:root {
  /* COLORS */
  /* brand colors */
  --mb-white: white;
  --mb-offwhite: #fcfcfc;
  --mb-gray-3: #f8f8f8;
  --mb-gray-6: #f2f2f2;
  --mb-gray-10: #efefef;
  --mb-gray-20: #dddddd;
  --mb-gray-30: #c0c0c0;
  --mb-gray-35: #bbbbbb;
  --mb-gray-40: #a9a9a9;
  --mb-gray-50: #777777;
  --mb-gray-60: #444444;
  --mb-black: #000000;
  --mb-orange-accent: #947000;

  /* functional colors */
  --left-sidebar-color: var(--mb-white);
  --tabs-ui-color: var(--mb-black);
  --paper-color: var(--mb-white);
  --surface-color: var(--mb-gray-10);
  --music-box-color: var(--mb-gray-30);
  --controls-button-color: var(--mb-offwhite);
  --controls-button-border-color: var(--mb-gray-20);
  --controls-button-border-bottom-color: var(--mb-gray-35);
  --active-hole-color: #ffb500;
  --highlighted-pitch-color: #eaeaa4;
  --link-color: var(--mb-black);
  --text-color: var(--mb-black);
  --discrete-text: var(--mb-gray-40);
  --error-text-red: red;
  --icon-dark: var(--mb-gray-60);
  --hole-color: 68, 68, 68; /* rgb values for --mb-gray-60, so we can add alpha as needed */
  --selection-color: 19, 131, 254; /* rgb values, so we can add alpha as needed */

  /* FONTS */
  --main-font: 'Nunito', 'Helvetica Neue', sans-serif;

  /* LENGTHS */
  --left-sidebar-width: 286px;
  --right-sidebar-width: 175px;
  --paper-side-margin: 32px;
  --music-box-height: 200px; /* the same for all music boxes */
  --music-box-distance-from-top-of-workspace: 120px;
  --playhead-distance-from-top-of-workspace: calc(var(--music-box-distance-from-top-of-workspace) + 44px);
  --tabs-border: 1px;
  --floating-action-button-diameter: 56px;

  /* page height breakdown */
  --number-of-bars: 52;
  --quarter-bar-gap: 48px;
  --note-line-starting-gap: 16px; /* the same for all box types and hole sizes */
  --final-bar-line: 1px;
  --footer-button-height: 48px;
  --total-note-line-height: calc(
      var(--number-of-bars)
    * var(--quarter-bar-gap)
    + var(--note-line-starting-gap)
    + var(--final-bar-line)
    + var(--footer-button-height)
  );


  /* Z-INDEX (page context) */
  /* -1-20: music box */
  --z-music-box-bottom-plate: -1;
  --z-music-box-extend-button: 2;
  --z-music-box-notes: 4;
  --z-music-box-selected-notes: calc(var(--z-music-box-notes) + 1);
  --z-space-editor-bar: 7;
  --z-music-box-note-header: 8;
  --z-music-box-playhead: 10;
  --z-drag-zone: 15;
  /* 21-100: Overlays */
  --z-nav-icons: 22;
  --z-controls: 22;
  --z-share-box: 28;
  --z-floating-actions: 28;
  --z-audio-context-message: 30;
  --z-overlay-message: 34;
  --z-selection-box: 40;
  --z-drag-zone--is-dragging: 50;
  --z-off-canvas-sidebar-overlay: 75;
  --z-off-canvas-sidebar: 80;

  /* (left-sidebar context) */
  --z-search-results: 1;

  /* OTHER */
  --controls-border: 1px dashed var(--mb-gray-30);
  --back-to-top-scroll-position: 200px;
  --asterisk-svg: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(249,68,68)" d="M8.673 6.788c.194-2.327.34-3.394.63-4.364.194-.582.291-1.115.291-1.503C9.594.388 8.964 0 7.946 0c-.97 0-1.6.388-1.6.97 0 .29.097.775.242 1.357.194.68.485 2.86.63 4.46-1.066-.775-2.472-1.939-3.296-2.811-.728-.728-1.164-1.018-1.552-1.018-.727 0-1.6 1.212-1.6 2.133 0 .388.29.727.824.824 1.358.388 3.055.97 3.83 1.358 1.067.533 1.067.533 1.407.727-1.455.776-3.152 1.6-4.897 2.279-.728.34-.97.533-.97 1.018 0 .824.97 1.988 1.648 1.988.34 0 .68-.243 1.213-.873.97-1.018 2.472-2.57 3.393-3.394-.193 2.327-.29 2.812-.581 4.412-.146.68-.291 1.455-.291 1.6 0 .63.582.97 1.551.97 1.067 0 1.746-.388 1.746-.97 0-.388-.097-.97-.291-1.697-.194-.678-.388-1.794-.679-4.315 1.552 1.212 2.376 1.891 3.2 2.715.873.922 1.406 1.26 1.794 1.26.679 0 1.551-1.163 1.551-1.987 0-.582-.145-.679-1.987-1.358C10.418 8.63 10.418 8.63 9.012 8a28.542 28.542 0 014.122-1.697c1.745-.582 2.036-.776 2.036-1.26 0-.922-1.067-2.23-1.794-2.23-.242 0-.582.193-.97.58-2.036 2.037-2.23 2.183-3.733 3.395z" fill-rule="evenodd"/></svg>');

  /* BREAKPOINTS */
  /* These aren't a thing! See https://stackoverflow.com/a/40723269/1154642
     I'm going to put them here anyway, for documentation. If I ever need
     to change one of these variables, I'll just find/replace the pixel value.
     I'll also try to keep the pixel values unique, so it's unlikely that any
     other properties will inadvertently use them.

  --one-to-two-columns: 720px;
  --two-to-three-columns: 900px;
  */
}

/* These variables are defined on 'body' so they can be affected by body classes */
body {
  --number-of-notes: 15;
  --hole-width: 16px;
  /* Used to adjust the y-position of the note, centering it on the value defined in songData.
     Doing this in CSS allows us to make CSS-driven hole-size adjustments (for mobile, print, etc).
     For more details, see the comments in note-line.js */
  --y-adjustment-for-hole-width: calc((var(--hole-width) / 2) * -1);
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:  url('/fonts/nunito-v8-latin-regular.woff') format('truetype');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/nunito-v8-latin-700.woff') format('truetype');
}
