/* Theme tokens. The light theme avoids pure white and pure black (soft cream surfaces, charcoal ink)
   so long sessions are easier on the eyes. Dark = night control room (--bg matches the 3D "graphite" backdrop); light = warm paper
   (--bg matches the 3D "paper" backdrop). html[data-theme] is set by js/theme.js before first paint. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12171d;
  --surface: #171d24;
  --surface-2: #1d242c;
  --rule: #28313b;
  --rule-strong: #36414c;
  --ink: #e3e6e8;
  --ink-2: #a3abb3;
  --ink-3: #78818a;
  --select: #8fa9d6; /* same steel blue as the 3D selection ring */
  --accent: #8fa9d6;
  --on-accent: #12171d;

  /* Equipment states: always paired with a text label. */
  --st-loaded: #3fbf86;
  --st-running: #4fb0d8;
  --st-unloaded: #f0b03c;
  --st-stopped: #8c96a3;
  --st-alarm: #f06a5a;
  --st-estop: #f06a5a;
  --st-warning: #f08a3c;
  --st-offline: #59626d;

  /* Brand-led palette (2026-10-30, second pass: livelier data colors on request, still no neon or violet): Stevanato Group / OMPI navy (#14387f) for accents and selection, Sullair sage
     (#74956c) for running equipment; every other hue is muted (no neon, no violet). Checked against the
     official sites' CSS on 2026-10-30. Chart series stay distinct on both themes. */
  --c1: #6f9cf0;
  --c2: #f06a5a;
  --c3: #3fbf86;
  --c4: #f0b03c;
  --c5: #e0679f;

  /* Digital signals: one color per relay K1..K8 and input D1..D10 (js/signals.js). */
  --k1: #3fbf86; --k2: #4fb0d8; --k3: #6f9cf0; --k4: #a4c45a; --k5: #3fc2b8; --k6: #f06a5a; --k7: #f08a3c; --k8: #8c96a3;
  --d1: #f06a5a; --d2: #f0b03c; --d3: #e0679f; --d4: #6f9cf0; --d5: #3fbf86; --d6: #f0b03c; --d7: #a4c45a; --d8: #f08a3c; --d9: #6b737c; --d10: #6b737c;
  --lane-off: #1f262e;
  /* One color per compressor (Conjunto comparison), in plant list order AC-1, AC-2, AC-3, TS-32, TS-20, LS-160. */
  --u1: #6f9cf0; --u2: #f06a5a; --u3: #3fbf86; --u4: #f0b03c; --u5: #e0679f; --u6: #4fb0d8;

  /* Surfaces drawn over the 3D and floating panels. */
  --glass: rgb(23 29 36 / 0.9);
  --glass-hover: rgb(29 36 44 / 0.96);
  --card-tint: rgb(29 36 44 / 0.5);
  --shadow: 0 6px 18px rgb(0 0 0 / 0.35);
  --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.35);

  --font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-cond: 'Barlow Semi Condensed', 'Barlow', 'Arial Narrow', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --gutter: 16px;
  --radius: 6px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9eff6;
  --surface: #f9fbfd;
  --surface-2: #eef3f9;
  --rule: #d8e1eb;
  --rule-strong: #c1cddb;
  --ink: #1b2633;
  --ink-2: #4a5869;
  --ink-3: #4f5d71;
  --select: #14387f;
  --accent: #14387f;
  --on-accent: #ffffff;

  --st-loaded: #0f7a3e;
  --st-running: #11658f;
  --st-unloaded: #8a5c00;
  --st-stopped: #5f6c7c;
  --st-alarm: #b81f1f;
  --st-estop: #b81f1f;
  --st-warning: #a8470a;
  --st-offline: #a3adba;

  --c1: #1f5fd1;
  --c2: #d1342f;
  --c3: #1a8a50;
  --c4: #c98200;
  --c5: #b5367a;

  --k1: #1a8a50; --k2: #1773a3; --k3: #1f5fd1; --k4: #5d7f1e; --k5: #178a85; --k6: #c92a2a; --k7: #c95a12; --k8: #728091;
  --d1: #c92a2a; --d2: #c98200; --d3: #b5367a; --d4: #1f5fd1; --d5: #1a8a50; --d6: #b07400; --d7: #5d7f1e; --d8: #c95a12; --d9: #9aa6b4; --d10: #9aa6b4;
  --lane-off: #e3eaf2;
  --u1: #1f5fd1; --u2: #d1342f; --u3: #1a8a50; --u4: #c98200; --u5: #b5367a; --u6: #1773a3;

  --glass: rgb(249 251 253 / 0.9);
  --glass-hover: rgb(249 251 253 / 1);
  --card-tint: rgb(249 251 253 / 0.72);
  --shadow: 0 8px 22px rgb(20 40 80 / 0.12);
  --shadow-sheet: 0 -8px 24px rgb(20 40 80 / 0.14);
  /* Pharma look: pearl white at the top fading into a soft clinical blue (the page background only). */
  --page-bg: radial-gradient(1100px 620px at 12% -10%, #ffffff 0%, rgb(255 255 255 / 0) 62%),
    linear-gradient(180deg, #f4f7fb 0%, #e3eaf3 45%, #cfdbe8 100%);
}

/* State colors as one custom property, shared by tags, rail, badges, wires and the timeline. */
.state-loaded { --tone: var(--st-loaded); }
.state-running { --tone: var(--st-running); }
.state-unloaded { --tone: var(--st-unloaded); }
.state-stopped { --tone: var(--st-stopped); }
.state-alarm { --tone: var(--st-alarm); }
.state-estop { --tone: var(--st-estop); }
.state-warning { --tone: var(--st-warning); }
.state-offline { --tone: var(--st-offline); }