/* DP-408 UI — design tokens
 *
 * Every component reads only these custom properties. Override any of them
 * on :root (whole app) or on a single element (one component) to restyle.
 * Dark is the default (venues, racks); light follows the system setting or
 * data-theme="light" on <html>.
 *
 * Colour carries meaning here:
 *   --dp-strip-1…8 channel colours (band on top of each strip, index line on the cap);
 *                  a validated set: neighbours stay apart, also for colour-blind eyes
 *   --dp-kind-*    fallback colour per channel kind when a fader has no colour
 *   --dp-led-*     meter zones (green, yellow near the limit, red above)
 *   --dp-limit     limiter is reducing gain
 *   --dp-mute      channel is muted
 *   --dp-accent    the one thing the user is touching or has selected
 *   --dp-unity     the value sits exactly on 0 dB
 *   --dp-flash     short flash of the value after a ± press (= --dp-accent: one colour for "being changed")
 *
 * Wells (meter, slot, displays) stay dark in both themes, like real
 * hardware, so text inside them uses the --dp-on-well-* tokens.
 */

:root {
  /* surfaces: graphite with a cold bias, like anodised rack metal */
  --dp-bg: #0a0d14;
  --dp-deck: #0d1119;           /* the console surface the strips stand on */
  --dp-surface: #141a26;
  --dp-surface-2: #1b2232;
  --dp-well: #070a10;
  --dp-line: #273147;
  --dp-line-strong: #3a4763;

  /* ink on surfaces */
  --dp-ink: #e7ebf3;
  --dp-ink-2: #a3aec3;
  --dp-ink-3: #75809a;

  /* ink inside wells */
  --dp-on-well: #eef2f8;
  --dp-on-well-dim: #6f7a93;
  --dp-readout: var(--dp-on-well);

  /* meaning */
  --dp-accent: #ffb547;
  --dp-accent-ink: #2b1a00;
  --dp-mute: #ff4d4d;
  --dp-mute-ink: #2a0606;
  --dp-limit: #ff8a3d;
  --dp-unity: #7fe0b0;          /* only tints the readout text slightly */
  --dp-flash: var(--dp-accent); /* ± press lights the value in the same colour as dragging */
  --dp-mute-wash: 16%;          /* how much red a muted strip takes on */
  --dp-ok: #3be37a;
  --dp-focus: #e9edf4;          /* neutral ring: colour stays reserved for meaning */

  /* meter LEDs */
  --dp-led-green: #3be37a;
  --dp-led-yellow: #f4d24b;
  --dp-led-red: #ff4b4b;
  --dp-led-off: 0.10;          /* opacity of an unlit segment */
  --dp-led-glow: 9px;          /* halo radius of lit segments, 0 disables */
  --dp-led-bloom: 0.7;         /* halo strength */

  /* channel strips: lift each one off the deck so meter and fader read as one unit */
  --dp-strip-bg: #182030;
  --dp-strip-edge: #2e3a52;
  --dp-strip-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);

  /* fader groups (<dp-fader-group>): a frame around a block of strips */
  --dp-group-bg: #111723;
  --dp-group-edge: #232c3e;
  --dp-group-gap: 6px;
  --dp-link: #86a0c4;           /* links, QUELLE/ZIEL, latched LEDs: muted steel, the quiet complement to the amber */
  --dp-link-ink: #0c1422;       /* text on a filled --dp-link */

  /* keys (ui/dp-keys.js): one raised hardware key for every button */
  --dp-key-radius: 4px;
  --dp-key-top: #252c39;
  --dp-key-bottom: #20262f;
  --dp-key-edge: #090c12;
  --dp-key-shine: rgba(255, 255, 255, .07);
  --dp-key-drop: rgba(0, 0, 0, .6);
  --dp-key-ink: #a9b3c5;

  /* channel colours (8 slots, OKLCH L≈0.61, checked with a CVD validator:
     worst neighbour pair ΔE 9.2 deutan, 22 normal vision) */
  --dp-strip-1: #4582db;        /* blue */
  --dp-strip-2: #d4614c;        /* coral */
  --dp-strip-3: #009585;        /* teal */
  --dp-strip-4: #926bcf;        /* violet */
  --dp-strip-5: #749f2b;        /* lime */
  --dp-strip-6: #c65788;        /* rose */
  --dp-strip-7: #0097bf;        /* sky */
  --dp-strip-8: #b98a00;        /* gold */

  /* channel kinds: fallback when a fader has no colour */
  --dp-kind-in: #79a9c2;        /* muted steel blue */
  --dp-kind-out: #a39dc4;       /* muted lavender */
  --dp-kind-spk: #c4a57a;       /* muted brass */
  --dp-kind-master: #c9cfda;

  /* fader cap */
  --dp-cap-top: #3a4150;
  --dp-cap-mid: #232833;
  --dp-cap-bottom: #2d3340;
  --dp-cap-edge: #5a6274;
  --dp-cap-index: #e9edf4;      /* index line: neutral, tinted by the kind colour */
  --dp-cap-index-tint: 0.3;

  /* overlays (confirmations) */
  --dp-overlay: rgba(8, 11, 18, .45);
  --dp-pop: rgba(32, 39, 56, .86);
  --dp-pop-line: rgba(255, 255, 255, .08);
  --dp-pop-press: rgba(255, 255, 255, .06);
  --dp-pop-shadow: 0 14px 34px rgba(0, 0, 0, .45);

  /* type */
  --dp-font: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --dp-font-label-stretch: 75%;
  --dp-font-value-stretch: 112%;

  /* shape & size */
  --dp-radius-s: 6px;
  --dp-radius-m: 10px;
  --dp-radius-l: 14px;
  --dp-target: 44px;
  --dp-fader-width: 104px;
  --dp-fader-height: 520px;

  /* safety */
  --dp-confirm-louder-than: 6;  /* dB: jumps louder than this ask first */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --dp-bg: #dfe4eb;
    --dp-deck: #e1e6ed;
    --dp-strip-bg: #ffffff;
    --dp-strip-edge: #c4cbd7;
    --dp-strip-shadow: 0 1px 2px rgba(20, 30, 50, .07);
    --dp-group-bg: #eef1f5;
    --dp-group-edge: #cdd3dd;
    --dp-link: #46658c;
    --dp-key-top: #fbfcfd;
    --dp-key-bottom: #f0f2f6;
    --dp-link-ink: #ffffff;
    --dp-key-edge: #a9b2c1;
    --dp-key-shine: rgba(255, 255, 255, .95);
    --dp-key-drop: rgba(20, 30, 50, .2);
    --dp-key-ink: #3c4555;
    --dp-strip-1: #427fd8;
    --dp-strip-2: #d15e49;
    --dp-strip-3: #009282;
    --dp-strip-4: #8f68cb;
    --dp-strip-5: #719c27;
    --dp-strip-6: #c25485;
    --dp-strip-7: #0094bc;
    --dp-strip-8: #b98a00;
    --dp-mute-wash: 12%;
    --dp-surface: #f5f7fa;
    --dp-surface-2: #ffffff;
    --dp-well: #1d222c;
    --dp-line: #cbd2de;
    --dp-line-strong: #a3adbf;
    --dp-ink: #10151e;
    --dp-ink-2: #3c4555;
    --dp-ink-3: #5d6677;
    --dp-on-well: #f2f5fa;
    --dp-on-well-dim: #8a94a6;
    --dp-accent: #df8600;
    --dp-accent-ink: #ffffff;
    --dp-mute: #e2302f;
    --dp-mute-ink: #ffffff;
    --dp-limit: #ef6a12;
    --dp-unity: #7fe0b0;
    --dp-ok: #129a45;
    --dp-focus: #10151e;
    --dp-led-off: 0.16;
    --dp-led-glow: 6px;
    --dp-led-bloom: 0.5;
    --dp-kind-in: #4f87a3;
    --dp-kind-out: #6f68a0;
    --dp-kind-spk: #9c7a45;
    --dp-kind-master: #2a3140;
    --dp-cap-top: #fdfdfe;
    --dp-cap-mid: #d6dbe3;
    --dp-cap-bottom: #eef1f5;
    --dp-cap-edge: #97a1b1;
    --dp-cap-index: #252b37;
    --dp-overlay: rgba(235, 239, 245, .5);
    --dp-pop: rgba(255, 255, 255, .88);
    --dp-pop-line: rgba(20, 30, 50, .10);
    --dp-pop-press: rgba(20, 30, 50, .05);
    --dp-pop-shadow: 0 14px 34px rgba(20, 30, 50, .18);
  }
}
:root[data-theme="light"] {
  --dp-bg: #dfe4eb;
  --dp-deck: #e1e6ed;
  --dp-strip-bg: #ffffff;
  --dp-strip-edge: #c4cbd7;
  --dp-strip-shadow: 0 1px 2px rgba(20, 30, 50, .07);
  --dp-group-bg: #eef1f5;
  --dp-group-edge: #cdd3dd;
  --dp-link: #46658c;
  --dp-key-top: #fbfcfd;
  --dp-key-bottom: #f0f2f6;
  --dp-link-ink: #ffffff;
  --dp-key-edge: #a9b2c1;
  --dp-key-shine: rgba(255, 255, 255, .95);
  --dp-key-drop: rgba(20, 30, 50, .2);
  --dp-key-ink: #3c4555;
  --dp-strip-1: #427fd8;
  --dp-strip-2: #d15e49;
  --dp-strip-3: #009282;
  --dp-strip-4: #8f68cb;
  --dp-strip-5: #719c27;
  --dp-strip-6: #c25485;
  --dp-strip-7: #0094bc;
  --dp-strip-8: #b98a00;
  --dp-mute-wash: 12%;
  --dp-surface: #f5f7fa;
  --dp-surface-2: #ffffff;
  --dp-well: #1d222c;
  --dp-line: #cbd2de;
  --dp-line-strong: #a3adbf;
  --dp-ink: #10151e;
  --dp-ink-2: #3c4555;
  --dp-ink-3: #5d6677;
  --dp-on-well: #f2f5fa;
  --dp-on-well-dim: #8a94a6;
  --dp-accent: #df8600;
  --dp-accent-ink: #ffffff;
  --dp-mute: #e2302f;
  --dp-mute-ink: #ffffff;
  --dp-limit: #ef6a12;
  --dp-unity: #7fe0b0;
  --dp-ok: #129a45;
  --dp-focus: #10151e;
  --dp-led-off: 0.16;
  --dp-led-glow: 6px;
  --dp-led-bloom: 0.5;
  --dp-kind-in: #4f87a3;
  --dp-kind-out: #6f68a0;
  --dp-kind-spk: #9c7a45;
  --dp-kind-master: #2a3140;
  --dp-cap-top: #fdfdfe;
  --dp-cap-mid: #d6dbe3;
  --dp-cap-bottom: #eef1f5;
  --dp-cap-edge: #97a1b1;
  --dp-cap-index: #252b37;
  --dp-overlay: rgba(235, 239, 245, .5);
  --dp-pop: rgba(255, 255, 255, .88);
  --dp-pop-line: rgba(20, 30, 50, .10);
  --dp-pop-press: rgba(20, 30, 50, .05);
  --dp-pop-shadow: 0 14px 34px rgba(20, 30, 50, .18);
}