/* ---------- Umbrella Networks edition: design system ----------
   Studio skin: loaded by honeywell.html and plant.html (<html data-skin="studio">), after the
   shared sheets; plant.html then recolours it with styles/jabil/tokens.css. It
   only overrides tokens and surfaces. Brand: black (#000) + amber (#faa21b), from
   umbrella-networks.com. Three ideas, used together:
   - Neumorphism on the opaque views: every surface is filled with the page colour and lifted
     by a dark shadow (+6,+6) and a white one (-6,-6), both 5px blur; pressed = the same
     shadows inset. Text keeps >= 4.5:1 contrast on that colour.
   - Low poly: faceted ridge behind the views and faceted night behind the loading screen
     (brand/low-poly.js, applied by brand/decor.js).
   - Golden ratio (1.618): type scale 13 > 21 > 34, column split 1.618fr 1fr, tile proportions.
   Over the 3D model the overlays stay glass (neumorphism needs a flat colour behind it),
   tinted charcoal with the same amber accent. */
:root[data-skin='studio'] {
  /* Colour */
  --brand: #0d0d0f;
  --accent: #e20100; /* Honeywell red (S48): the single edition accent */
  --accent-strong: #b3000b; /* red text on the light surface: 5.6:1 */
  --page-bg: #e4e6ea;
  --surface: #e4e6ea;
  --surface-sunk: #dcdee3;
  --hud-text: #1b1c20;
  --hud-muted: #4c5059; /* 6.1:1 on --surface */
  --hud-border: rgb(20 22 28 / 0.1);
  --hud-bg: rgb(244 245 247 / 0.94);
  --glass: rgb(18 18 22 / 0.8);
  --glass-solid: rgb(14 14 17 / 0.95);
  --glass-line: rgb(255 255 255 / 0.1);
  --on-glass: #f3f3f5;
  --on-glass-muted: #b4b6bd;
  --state-running: #2fbf7a;
  --state-warning: #f2c230; /* yellow, distinct from the amber accent (S29) */
  /* Chart series: validated with the dataviz palette checker on #e4e6ea (CVD ΔE ≥ 15). */
  /* Amber is last so the first series never reads as "selected" (S29). */
  --chart-1: #3d5a96;
  --chart-2: #1f8a70;
  --chart-3: #8a4fc0;
  --chart-4: #b3611f; /* burnt orange: not the reserved alarm red (validator PASS) */
  --chart-5: #2f86b8;
  --chart-6: #c27600;
  /* One depth language (S29): light flat cards with a soft drop shadow on the graphite
     backdrop; extrusion only marks the selected control. No neumorphic white glow. */
  --shadow-dark: rgb(0 0 0 / 0.22);
  --shadow-light: transparent;
  --raised: 0 1px 2px rgb(0 0 0 / 0.18), 0 6px 16px rgb(0 0 0 / 0.22);
  --raised-hover: 0 2px 4px rgb(0 0 0 / 0.2), 0 10px 24px rgb(0 0 0 / 0.28);
  --inset: inset 0 1px 2px rgb(0 0 0 / 0.14);
  --radius: 13px;
  /* Selected / active menu state = extrusion (S23): the Honeywell-red face (S47 unifies every
     menu — top nav, ERP side nav, Energía sub-nav, trends range, detail tabs, Kanban), its
     silhouette repeated 3px down-right in a dark red. Pressed squashes it to 1px. No perspective. */
  --selected-bg: #e20100;
  --selected-ink: #ffffff; /* white on the red face: 4.95:1 */
  --selected-edge: #7a0000;
  --selected: 3px 3px 0 var(--selected-edge);
  --selected-pressed: 1px 1px 0 var(--selected-edge);
  /* Golden ratio type scale and spacing (S9) */
  --phi: 1.618;
  --fs-1: 13px;
  --fs-2: 21px; /* 13 × 1.618 */
  --fs-3: 34px; /* 21 × 1.618 */
  --sp-1: 8px;
  --sp-2: 13px;
  --sp-3: 21px;
  --sp-4: 34px;
  /* Interaction (S10) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
}
:root[data-skin='studio'] body {
  font-family: 'DM Sans', 'Poppins', system-ui, 'Segoe UI', Roboto, sans-serif;
}