/* Design tokens, dark scheme only (the app has one theme now). No component
   styles here: see design/system.md for the values and the contrast table
   they were checked against. The one thing that is not a token is the
   @font-face rules below, since the type tokens name a family and these are
   where it comes from. */

/* IBM Plex, served from app/fonts/ and never from anyone else's server: see
   app/fonts/README.md. Only the weights the app sets (400, 500 and 600) and
   only the latin and latin-ext subsets, each fetched when a page first needs
   a character in its range. font-display: swap puts text up in the fallback
   face straight away and swaps Plex in when it lands. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The page is dark, so the browser draws what it draws itself (the scrollbar,
     a select's list, a tick box) dark too, instead of ivory text on a white list. */
  color-scheme: dark;

  /* Colour */
  --bg: #000000;
  --panel: #1A1715;
  --ink: #F4F1EA;
  --ink-2: #B6AE9C;
  --line: #332E27;
  /* The edge of a control you type into, which has to be seen to be found:
     --line's hue and saturation at the lightness that clears 3:1 on every
     surface a field sits on (3.40 on --panel-hi, the lightest, up to 4.53 on
     --bg). --line stays for hairlines, which only divide. */
  --control-edge: #7F7361;
  --accent: #EDE8DC;
  --kind-audio: #E0912F;
  --kind-midi: #5B9BD9;
  --kind-text: #ACA593;
  --kind-json: #ACA593;
  --kind-session: #5FB86D;
  --kind-archive: #EDE8DC;
  --kind-stems: #4FC3C3;
  --ok: #4FBA63;
  --warn: #D99A2B;
  --bad: #EA556E;
  /* What a drawer lays over the page behind it. */
  --scrim: rgba(0, 0, 0, 0.6);

  /* Module colours: one per node type, on its faceplate head, its head icon,
     its Add menu entry and its library chip. Kind colours above (sockets,
     cables, row icons) are unrelated and stay as they are. */
  --mod-song: #EDE8DC;
  --mod-songbones: #4FC3C3;
  --mod-drumscribe: #5B9BD9;
  --mod-chartwright: #D9C34A;
  --mod-beatgrid: #9CCB4A;
  --mod-lyrics: #C489E6;
  --mod-mixdown: #E8805C;
  --mod-backingtrack: #9FD8F0;
  --mod-preview: #E0912F;
  --mod-pianoroll: #E3ABB8;
  /* One colour for the transform family: Transpose, Tempo change, Loudness
     and Convert all take a song or its stems and give the same back, changed. */
  --mod-transform: #B4B8FF;
  /* One for the sampling family too: the Loop finder, the Drum slicer and the
     Sample kit cut a song into samples and make a kit of them. */
  --mod-sampling: #BEF4CE;
  --mod-sections: #FDC5A1;
  --mod-default: #B6AE9C;

  /* Machined-panel surfaces: see design/system.md "machined rack" pass.
     panel-hi/rack are extra surface levels; edge-hi/edge-lo are the two
     highlight/shadow lines every raised or recessed part draws; shadow-key
     and shadow-ambient are the tight and wide layers of a part's drop
     shadow; led-halo is the percent color-mix uses to glow an LED. */
  --panel-hi: #262220;
  --rack: #0E0C0B;
  --edge-hi: rgba(255, 255, 255, 0.16);
  --edge-lo: rgba(0, 0, 0, 0.7);
  --shadow-key: rgba(0, 0, 0, 0.6);
  --shadow-ambient: rgba(0, 0, 0, 0.45);
  --led-halo: 55%;

  /* Type: the two families are the @font-face rules at the top of this file;
     the system faces after them only show while those load. */
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --text-xs-size: 0.75rem;
  --text-xs-line: 1rem;
  --text-sm-size: 0.8125rem;
  --text-sm-line: 1.25rem;
  --text-base-size: 0.9375rem;
  --text-base-line: 1.5rem;
  --text-lg-size: 1.25rem;
  --text-lg-line: 1.625rem;
  --text-xl-size: 2rem;
  --text-xl-line: 2.25rem;

  /* Spacing: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-lg: 1.5rem;

  /* Focus ring and minimum touch target */
  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;
  --touch-min: 44px;

  /* Layout */
  --topbar-h: 4.5rem;
}