/* 2sl-ui tokens: the org's design system, the one source of truth for 2sl's colours, type and space.
   Consumers copy or generate from this file (2sl.to, LPX Grid, the Live Extensions, Max for Live
   via max/2sl-colors.json); they never define colours of their own. Light theme is the default;
   dark is the same system flipped to sit next to Live. Set <html data-theme="dark"> or "light".
   Every colour is a literal #RRGGBB (generators parse them). See README.md for the rules. */

@font-face {
  font-family: "Cozette";
  src: url("./fonts/CozetteVector.woff2") format("woff2");
  font-display: block;
}

:root {
  /* surfaces and ink */
  --pad: #D5D8DB;      /* background */
  --ink: #000000;      /* text, outlines, selected fill */
  --inverse: #FFFFFF;  /* text on ink */
  --unlit: #737980;    /* decoration and disabled controls only. Not for readable text. */
  --label: #595E65;    /* secondary text (labels, hints): WCAG AA on --pad */
  --now: #2D5BFF;      /* hover, focus, playing, "this is happening" */
  --now-text: #FFFFFF; /* text on a --now fill */
  --mint: #72DEC2;     /* text selection background */
  --selection-text: #000000; /* text on --mint */

  /* instruments (plugins, README "Plugins"): the ground of a display, its scale lines and knob tracks, and a
     display's second trace (the first is --ink) */
  --well: #C9CCCF;
  --grid: #B3B7BB;
  --trace-2: #00585A;

  /* Launchpad row hues (LPX_Script palette.py, snapshot rows top to bottom). The stored hue is
     the Launchpad's quarter brightness; dark raises it (README "Launchpad hues"). For pads and
     category tags; always with --pad-text. */
  --hue-red: #3E0000;
  --hue-orange: #3E1400;
  --hue-yellow: #3E3600;
  --hue-green: #003E00;
  --hue-cyan: #003E3E;
  --hue-blue: #00003E;
  --hue-purple: #22003E;
  --hue-pink: #3E0022;
  --hue-ink: #000000;
  --hue-grey: #464B51;
  --pad-text: #FFFFFF;  /* text on a hue, and on the blue and purple lit hues */
  --pad-edge: #000000;  /* the 1px outline around a pad */

  /* lit: the Launchpad's full-brightness colours, the same in both themes (an LED is an LED).
     For the pad that is lit right now (a matching snapshot, a pressed pad). Text on them is
     --lit-pad-text, except blue and purple, which take --pad-text (README "Launchpad hues"). */
  --hue-red-lit: #FF0000;
  --hue-orange-lit: #FF5000;
  --hue-yellow-lit: #FFDC00;
  --hue-green-lit: #00FF00;
  --hue-cyan-lit: #00FFFF;
  --hue-blue-lit: #0000FF;
  --hue-purple-lit: #8C00FF;
  --hue-pink-lit: #FF008C;
  --lit-pad-text: #000000; /* dark text on a bright, lit pad */

  /* type: Cozette is pixel-aligned only at multiples of 13px. Use 13 / 26 / 39, nothing else. */
  --font: "Cozette", Monaco, monospace;
  --small: 13px;
  --large: 26px;
  --huge: 39px;
  --line: 18px;

  /* interface type: IBM Plex Sans with tabular figures, for labels, values and scales (README "Type").
     --ui-label for labels and scales, --ui-value for values, --ui-value-large for a plugin's main values. */
  --ui-label: 11px;
  --ui-value: 12px;
  --ui-value-large: 20px;
  --ui-line: 16px;

  /* reading face: IBM Plex Sans for running text on web pages only (README "Type"); its
     @font-face is in text.css. Cozette is next so a ♭ (not in Plex) stays a pixel flat. */
  --text-font: "IBM Plex Sans", "Cozette", system-ui, sans-serif;
  --text-size: 16px;
  --text-line: 26px;
  --text-small: 14px;       /* running text in a narrow place, e.g. a card */
  --text-small-line: 20px;
  --text-lede: 20px;        /* a page's lede and the home rows: the summary under a title */
  --text-lede-line: 28px;
  --text-measure: 600px;    /* the widest running text: about 66 characters of Plex */

  /* space: a 4px grid */
  --unit: 4px;

  /* web pages: the space at the window edge and between page blocks, and the content width.
     Dialogs and devices don't use these; they pad with --unit multiples. */
  --gutter: calc(var(--unit) * 6);
  --page-width: 1200px;
}

:root[data-theme="dark"], [data-theme="dark"] {
  --pad: #262626;      /* Live's dark panel grey */
  --ink: #D5D8DB;      /* the light pad grey becomes the ink */
  --inverse: #262626;
  --unlit: #7E848B;
  --label: #8E949B;
  --well: #1B1B1C;
  --grid: #343638;
  --trace-2: #72DEC2;
  /* Hues raised to the lit colour x 0x6A/0xFF (README "Launchpad hues") so pads read on the dark pad */
  --hue-red: #6A0000;
  --hue-orange: #6A2300;
  --hue-yellow: #6A5B00;
  --hue-green: #005A00;
  --hue-cyan: #006A6A;
  --hue-blue: #00006A;
  --hue-purple: #3A006A;
  --hue-pink: #6A003A;
  --hue-ink: #0A0A0A;
  --hue-grey: #4A4F55;
}

/* narrow web pages (phones, small windows): a smaller gutter */
@media (max-width: 860px) {
  :root { --gutter: calc(var(--unit) * 4); }
}

/* base: apply to any 2sl-ui page */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, [data-theme] { background: var(--pad); color: var(--ink); }
body {
  font: var(--small)/var(--line) var(--font);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: none;
  font-variant-ligatures: none;
  font-synthesis: none;
  cursor: default;
}
button, select, input { font: inherit; color: inherit; }
input, textarea { caret-color: var(--ink); }
::selection { background: var(--mint); color: var(--selection-text); }
:focus-visible { outline: 1px solid var(--now); outline-offset: 2px; }