/* The only stylesheet that holds colour values. To re-theme, rotate the hue of
   "Surfaces", "Lines", "Text" and "Accent" together and leave "Meaning" alone. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/shared/fonts/ibm-plex-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Azeret Mono";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/shared/fonts/azeret-mono-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest. */
  --bg: #110c0e;            /* page; keep <meta name="theme-color"> in step */
  --well: #130e11;          /* recessed areas: stages, EQ, segmented tracks, dropzones */
  --panel: #191316;
  --panel-2: #22181d;       /* raised strips inside a panel; hover fills */
  --control: #2b1e24;       /* secondary buttons, file buttons */
  --panel-3: #37282f;       /* disabled fills, progress track */
  --checker: #1c1418;       /* transparency checkerboard on --well */

  /* Lines. */
  --line-faint: #34272d;
  --line: #3e2e36;
  --line-strong: #5e444f;
  --line-bright: #694d5a;   /* dashed dropzone outline, secondary button border */
  --track: #4c3841;         /* range track, switch when off */

  /* Text. */
  --ink: #f9ebef;
  --muted: #bda5ad;
  --dim: #8f7680;

  /* Accent. */
  --accent: #f07bb9;
  --accent-ink: #1c0c13;    /* text on an accent fill */
  --highlight: #feb4c1;

  /* Meaning, not theme: these do not follow the palette hue. */
  --error: #ff8a70;
  --ok: #88b37d;
  --chan-r: #da6b54;
  --chan-g: #9bbf67;
  --chan-b: #6f9cc8;
  --chan-a: #eaadbb;

  /* Derived. */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 20%, transparent);
  --bg-veil: color-mix(in srgb, var(--bg) 97%, transparent);
  --stage-veil: color-mix(in srgb, var(--well) 78%, transparent);
  --shade: rgb(0 0 0 / .36);              /* neutral drop-shadow colour */
  --shadow: 0 16px 42px rgb(0 0 0 / .32);

  /* Type. */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-3xs: 8px;
  --fs-2xs: 9px;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-lg: 13px;
  --fs-xl: 15px;
  --fs-2xl: 19px;
  --ls-caps: .08em;

  /* Spacing and density. */
  --sp-1: 3px;
  --sp-2: 5px;
  --sp-3: 7px;
  --sp-4: 10px;
  --sp-5: 14px;
  --pad-y: 9px;             /* rail sections */
  --pad-x: 10px;
  --gap-workbench: 10px;
  --control-gap: 7px;       /* between stacked controls */

  /* Control sizes. */
  --control-h: 38px;        /* primary actions */
  --control-h-sm: 32px;     /* ghost buttons, selects, segmented buttons */
  --control-h-xs: 24px;     /* file buttons, slot buttons */
  --tab-h: 36px;
  --range-h: 24px;
  --range-track: 4px;
  --range-thumb: 18px;
  --switch-w: 44px;
  --switch-h: 26px;
  --switch-knob: 18px;
  --drop-h: 64px;
  --drop-art: 38px;
  --suitebar-h: 62px;

  --radius: 10px;
  --radius-md: 7px;
  --radius-sm: 5px;
}