/* Soft Console — generated from tokens.json */

:root, [data-theme="graphite-teal"] {
  --surface: #2a2d32;
  --surface-up: #303339;
  --surface-down: #25282c;
  --well: #23252a;
  --slot: #181b20;
  --rule: #1f2226;
  --shade-hi: #3a3e45b3;
  --shade-lo: #0f1115f2;
  --edge-hi: #41464e80;
  --edge-lo: #1c1e2199;
  --fill-muted: #4f555f;
  --text-1: #e4e7ec;
  --text-2: #b0b6bf;
  --text-3: #9499a4;
  --text-off: #60646c;
  --accent: #26c5a0;
  --accent-2: #3edaa1;
  --accent-text: #4bddbb;
  --accent-ink: #09251e;
  --accent-glow: #26c5a073;
  --accent-mark: var(--accent);
  --glow: 1;
  --accent-tint: #26c5a024;
  --ok: #51cd7a;
  --warn: #f7b23b;
  --crit: #f1747c;
  --info: #5fb2f2;
  --ok-led: var(--ok);
  --warn-led: var(--warn);
  --crit-led: var(--crit);
  --info-led: var(--info);
  --lcd-glass: #bfc8ac;
  --lcd-ink: #202919;
  --lcd-ghost: #20291916;
  --lcd-shade: #131b0e66;
  --lcd-sheen: #f8faf461;
  --vfd-glass: #0e1116;
  --vfd-glass-2: #142421;
  --vfd-ghost: #5ebaa513;
  --vfd-shade: #040507b3;
  --vfd-ink: #4bddbb;
  --vfd-glow: #26c5a073;
  --series-1: var(--accent);
  --series-2: #a897ed;
  --series-3: #e48baf;
  --series-4: #ccb88e;
  --mute-1: #949ca8;
  --mute-2: #717884;
  --mute-3: #5a5f68;
  --raised-1: 1.65px 1.65px 4.4px #0f1115f2, -1.65px -1.65px 4.4px #3a3e45b3;
  --raised-2: 3.3px 3.3px 8.8px #0f1115f2, -2.75px -2.75px 7.7px #3a3e45b3;
  --raised-3: 6.6px 6.6px 16.5px #0f1115f2, -5.5px -5.5px 14.3px #3a3e45b3;
  --float: 6.6px 6.6px 16.5px #0f1115f2;
  --inset-1: inset 1.65px 1.65px 3.85px #0f1115f2, inset -1.65px -1.65px 3.85px #3a3e45b3;
  --inset-2: inset 3.3px 3.3px 7.7px #0f1115f2, inset -2.75px -2.75px 6.6px #3a3e45b3;
  --btn-rest: 1.65px 1.65px 4.4px #0f1115f2, -1.65px -1.65px 4.4px #3a3e45b3, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-hover: 2.2px 2.2px 6.05px #0f1115f2, -2.2px -2.2px 6.05px #3a3e45b3, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-press: 0 0 0 #0000, 0 0 0 #0000, inset 1.38px 1.38px 3.3px #0f1115f2, inset -1.38px -1.38px 3.3px #3a3e45b3;
  --btn-flat: 0 0 0 #0000, 0 0 0 #0000, inset 0 0 0 #0000, inset 0 0 0 #0000;
}

[data-theme="carbon-cyan"] {
  --surface: #222426;
  --surface-up: #282a2d;
  --surface-down: #1d1f20;
  --well: #1a1c1e;
  --slot: #101214;
  --rule: #17181a;
  --shade-hi: #323639b3;
  --shade-lo: #070809f2;
  --edge-hi: #3a3d4180;
  --edge-lo: #13141699;
  --fill-muted: #484d51;
  --text-1: #e4e8ec;
  --text-2: #b0b8bf;
  --text-3: #949ca4;
  --text-off: #60666c;
  --accent: #19c7e6;
  --accent-2: #43e7ea;
  --accent-text: #51d4ec;
  --accent-ink: #092125;
  --accent-glow: #19c7e673;
  --accent-tint: #19c7e624;
  --vfd-glass: #0e1216;
  --vfd-glass-2: #142224;
  --vfd-ghost: #5eacba13;
  --vfd-ink: #51d4ec;
  --vfd-glow: #19c7e673;
  --series-2: #b49bed;
  --mute-1: #949ea8;
  --mute-2: #717a84;
  --mute-3: #5a6168;
  --raised-1: 1.65px 1.65px 4.4px #070809f2, -1.65px -1.65px 4.4px #323639b3;
  --raised-2: 3.3px 3.3px 8.8px #070809f2, -2.75px -2.75px 7.7px #323639b3;
  --raised-3: 6.6px 6.6px 16.5px #070809f2, -5.5px -5.5px 14.3px #323639b3;
  --float: 6.6px 6.6px 16.5px #070809f2;
  --inset-1: inset 1.65px 1.65px 3.85px #070809f2, inset -1.65px -1.65px 3.85px #323639b3;
  --inset-2: inset 3.3px 3.3px 7.7px #070809f2, inset -2.75px -2.75px 6.6px #323639b3;
  --btn-rest: 1.65px 1.65px 4.4px #070809f2, -1.65px -1.65px 4.4px #323639b3, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-hover: 2.2px 2.2px 6.05px #070809f2, -2.2px -2.2px 6.05px #323639b3, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-press: 0 0 0 #0000, 0 0 0 #0000, inset 1.38px 1.38px 3.3px #070809f2, inset -1.38px -1.38px 3.3px #323639b3;
}

/* light mode: data-mode="light" on <html> */

:root[data-mode="light"] {
  --surface: #dadde2;
  --surface-up: #e5e7eb;
  --surface-down: #d1d5dc;
  --well: #cfd3da;
  --slot: #b3bac7;
  --rule: #c2c8d0;
  --shade-hi: #fcfcfde6;
  --shade-lo: #586c8d73;
  --edge-hi: #f9fafbbf;
  --edge-lo: #a0a8b680;
  --fill-muted: #949dad;
  --text-1: #1d222b;
  --text-2: #3e444f;
  --text-3: #545a64;
  --text-off: #93979f;
  --accent: #1fa384;
  --accent-2: #26c98e;
  --accent-text: #136552;
  --accent-ink: #09251e;
  --accent-glow: #1fa38400;
  --accent-mark: #19856c;
  --glow: 0;
  --accent-tint: #1fa3842e;
  --ok: #1d6535;
  --warn: #8e4506;
  --crit: #b3121c;
  --info: #0c5c99;
  --ok-led: #41c86e;
  --warn-led: #f6aa28;
  --crit-led: #ef616b;
  --info-led: #4ca9f0;
  --vfd-glass: #12161c;
  --vfd-glass-2: #172b26;
  --vfd-ghost: #5ebaa513;
  --vfd-ink: #4bddbb;
  --vfd-glow: #26c5a073;
  --series-1: var(--accent);
  --series-2: #795fe3;
  --series-3: #d13d78;
  --series-4: #996c45;
  --mute-1: #656d7b;
  --mute-2: #868c98;
  --mute-3: #a5a9b1;
  --raised-1: 1.8px 1.8px 4.8px #586c8d73, -1.8px -1.8px 4.8px #fcfcfde6;
  --raised-2: 3.6px 3.6px 9.6px #586c8d73, -3px -3px 8.4px #fcfcfde6;
  --raised-3: 7.2px 7.2px 18px #586c8d73, -6px -6px 15.6px #fcfcfde6;
  --float: 7.2px 7.2px 18px #586c8d73;
  --inset-1: inset 1.8px 1.8px 4.2px #586c8d73, inset -1.8px -1.8px 4.2px #fcfcfde6;
  --inset-2: inset 3.6px 3.6px 8.4px #586c8d73, inset -3px -3px 7.2px #fcfcfde6;
  --btn-rest: 1.8px 1.8px 4.8px #586c8d73, -1.8px -1.8px 4.8px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-hover: 2.4px 2.4px 6.6px #586c8d73, -2.4px -2.4px 6.6px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-press: 0 0 0 #0000, 0 0 0 #0000, inset 1.5px 1.5px 3.6px #586c8d73, inset -1.5px -1.5px 3.6px #fcfcfde6;
}

:root[data-mode="light"][data-theme="carbon-cyan"] {
  --surface: #dbdee1;
  --surface-up: #e6e8ea;
  --surface-down: #d2d6da;
  --well: #d1d5d9;
  --slot: #b5bdc5;
  --rule: #c4c9cf;
  --shade-lo: #5c738a73;
  --edge-hi: #f9fafabf;
  --edge-lo: #a2abb380;
  --fill-muted: #97a1aa;
  --text-1: #1d242b;
  --text-2: #3d454d;
  --text-3: #545c64;
  --text-off: #93999f;
  --accent: #15a7c1;
  --accent-2: #1ee3e6;
  --accent-text: #0d6373;
  --accent-ink: #092125;
  --accent-glow: #15a7c100;
  --accent-mark: #118397;
  --accent-tint: #15a7c12e;
  --ok: #1e6736;
  --warn: #904706;
  --crit: #b5121d;
  --vfd-glass: #12171c;
  --vfd-glass-2: #17282b;
  --vfd-ghost: #5eacba13;
  --vfd-ink: #51d4ec;
  --vfd-glow: #19c7e673;
  --series-2: #855ce2;
  --series-3: #d23f7a;
  --series-4: #9b6d46;
  --mute-1: #65707b;
  --mute-2: #868f98;
  --mute-3: #a5abb1;
  --raised-1: 1.8px 1.8px 4.8px #5c738a73, -1.8px -1.8px 4.8px #fcfcfde6;
  --raised-2: 3.6px 3.6px 9.6px #5c738a73, -3px -3px 8.4px #fcfcfde6;
  --raised-3: 7.2px 7.2px 18px #5c738a73, -6px -6px 15.6px #fcfcfde6;
  --float: 7.2px 7.2px 18px #5c738a73;
  --inset-1: inset 1.8px 1.8px 4.2px #5c738a73, inset -1.8px -1.8px 4.2px #fcfcfde6;
  --inset-2: inset 3.6px 3.6px 8.4px #5c738a73, inset -3px -3px 7.2px #fcfcfde6;
  --btn-rest: 1.8px 1.8px 4.8px #5c738a73, -1.8px -1.8px 4.8px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-hover: 2.4px 2.4px 6.6px #5c738a73, -2.4px -2.4px 6.6px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
  --btn-press: 0 0 0 #0000, 0 0 0 #0000, inset 1.5px 1.5px 3.6px #5c738a73, inset -1.5px -1.5px 3.6px #fcfcfde6;
}

/* data-mode="auto" follows the operating system */

@media (prefers-color-scheme: light) {
  :root[data-mode="auto"] {
    --surface: #dadde2;
    --surface-up: #e5e7eb;
    --surface-down: #d1d5dc;
    --well: #cfd3da;
    --slot: #b3bac7;
    --rule: #c2c8d0;
    --shade-hi: #fcfcfde6;
    --shade-lo: #586c8d73;
    --edge-hi: #f9fafbbf;
    --edge-lo: #a0a8b680;
    --fill-muted: #949dad;
    --text-1: #1d222b;
    --text-2: #3e444f;
    --text-3: #545a64;
    --text-off: #93979f;
    --accent: #1fa384;
    --accent-2: #26c98e;
    --accent-text: #136552;
    --accent-ink: #09251e;
    --accent-glow: #1fa38400;
    --accent-mark: #19856c;
    --glow: 0;
    --accent-tint: #1fa3842e;
    --ok: #1d6535;
    --warn: #8e4506;
    --crit: #b3121c;
    --info: #0c5c99;
    --ok-led: #41c86e;
    --warn-led: #f6aa28;
    --crit-led: #ef616b;
    --info-led: #4ca9f0;
    --vfd-glass: #12161c;
    --vfd-glass-2: #172b26;
    --vfd-ghost: #5ebaa513;
    --vfd-ink: #4bddbb;
    --vfd-glow: #26c5a073;
    --series-1: var(--accent);
    --series-2: #795fe3;
    --series-3: #d13d78;
    --series-4: #996c45;
    --mute-1: #656d7b;
    --mute-2: #868c98;
    --mute-3: #a5a9b1;
    --raised-1: 1.8px 1.8px 4.8px #586c8d73, -1.8px -1.8px 4.8px #fcfcfde6;
    --raised-2: 3.6px 3.6px 9.6px #586c8d73, -3px -3px 8.4px #fcfcfde6;
    --raised-3: 7.2px 7.2px 18px #586c8d73, -6px -6px 15.6px #fcfcfde6;
    --float: 7.2px 7.2px 18px #586c8d73;
    --inset-1: inset 1.8px 1.8px 4.2px #586c8d73, inset -1.8px -1.8px 4.2px #fcfcfde6;
    --inset-2: inset 3.6px 3.6px 8.4px #586c8d73, inset -3px -3px 7.2px #fcfcfde6;
    --btn-rest: 1.8px 1.8px 4.8px #586c8d73, -1.8px -1.8px 4.8px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
    --btn-hover: 2.4px 2.4px 6.6px #586c8d73, -2.4px -2.4px 6.6px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
    --btn-press: 0 0 0 #0000, 0 0 0 #0000, inset 1.5px 1.5px 3.6px #586c8d73, inset -1.5px -1.5px 3.6px #fcfcfde6;
  }

  :root[data-mode="auto"][data-theme="carbon-cyan"] {
    --surface: #dbdee1;
    --surface-up: #e6e8ea;
    --surface-down: #d2d6da;
    --well: #d1d5d9;
    --slot: #b5bdc5;
    --rule: #c4c9cf;
    --shade-lo: #5c738a73;
    --edge-hi: #f9fafabf;
    --edge-lo: #a2abb380;
    --fill-muted: #97a1aa;
    --text-1: #1d242b;
    --text-2: #3d454d;
    --text-3: #545c64;
    --text-off: #93999f;
    --accent: #15a7c1;
    --accent-2: #1ee3e6;
    --accent-text: #0d6373;
    --accent-ink: #092125;
    --accent-glow: #15a7c100;
    --accent-mark: #118397;
    --accent-tint: #15a7c12e;
    --ok: #1e6736;
    --warn: #904706;
    --crit: #b5121d;
    --vfd-glass: #12171c;
    --vfd-glass-2: #17282b;
    --vfd-ghost: #5eacba13;
    --vfd-ink: #51d4ec;
    --vfd-glow: #19c7e673;
    --series-2: #855ce2;
    --series-3: #d23f7a;
    --series-4: #9b6d46;
    --mute-1: #65707b;
    --mute-2: #868f98;
    --mute-3: #a5abb1;
    --raised-1: 1.8px 1.8px 4.8px #5c738a73, -1.8px -1.8px 4.8px #fcfcfde6;
    --raised-2: 3.6px 3.6px 9.6px #5c738a73, -3px -3px 8.4px #fcfcfde6;
    --raised-3: 7.2px 7.2px 18px #5c738a73, -6px -6px 15.6px #fcfcfde6;
    --float: 7.2px 7.2px 18px #5c738a73;
    --inset-1: inset 1.8px 1.8px 4.2px #5c738a73, inset -1.8px -1.8px 4.2px #fcfcfde6;
    --inset-2: inset 3.6px 3.6px 8.4px #5c738a73, inset -3px -3px 7.2px #fcfcfde6;
    --btn-rest: 1.8px 1.8px 4.8px #5c738a73, -1.8px -1.8px 4.8px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
    --btn-hover: 2.4px 2.4px 6.6px #5c738a73, -2.4px -2.4px 6.6px #fcfcfde6, inset 0 0 0 #0000, inset 0 0 0 #0000;
    --btn-press: 0 0 0 #0000, 0 0 0 #0000, inset 1.5px 1.5px 3.6px #5c738a73, inset -1.5px -1.5px 3.6px #fcfcfde6;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --ctl-h: 44px;
  --ctl-h-compact: 36px;
  --pad-panel: 22px;
  --pad-panel-compact: 16px;
  --gap: 28px;
  --gap-compact: 18px;
  --row-py: 12px;
  --row-py-compact: 8px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --dur-press: 220ms;
  --dur-ui: 250ms;
  --dur-value: 900ms;
  --dur-enter: 520ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --font-ui: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.t-display {
  font-family: var(--font-ui);
  font-size: 44px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.66px;
}

.t-title {
  font-family: var(--font-ui);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.t-heading {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.t-body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

.t-label {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.38px;
}

.t-readout {
  font-family: var(--font-data);
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.8px;
}

.t-kpi {
  font-family: var(--font-data);
  font-size: 30px;
  line-height: 33px;
  font-weight: 500;
  letter-spacing: -0.6px;
}

.t-data {
  font-family: var(--font-data);
  font-size: 13.5px;
  line-height: 20px;
  font-weight: 400;
}