/* ============================================================
   Ayvarn theme — the ONLY file with colours, fonts and sizes.
   Matches the Ayvarn SCADA Viewer (HMI Grey). Change the look here.
   ============================================================ */
:root{
  /* Core tokens */
  --ink:#1A2329;
  --ink-2:#1F2B33;
  --steel:#33414A;
  --body:#46525B;
  --mute:#5B6770;
  --paper:#EEF1F3;
  --paper-2:#FFFFFF;
  --line:#D6DCE0;
  --line-2:#EAEDF0;
  --amber:#00747C;
  --amber-d:#00636A;
  --amber-soft:#E1EFF0;
  --ok:#2C7A2C;
  --dark:#1F2B33;
  --dark-2:#263540;
  --dark-line:#34454F;
  --dark-text:#F2F5F7;
  --dark-mute:#93A2AC;
  --mono:"IBM Plex Sans",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:12px;
  /* Brand */
  --eye:#00747C; --pupil:#1F2B33;
  --font-size:17px; --knob:#FFFFFF; --lb-bg:rgba(10,15,18,.88); --photo-shadow:0 8px 24px rgba(26,35,41,.12);
  --trend-a:rgba(92,200,194,.55); --trend-b:rgba(147,162,172,.35);
  --lv-bg:rgba(31,43,51,.88); --lv-line:rgba(147,162,172,.25); --lv-shadow:0 14px 34px rgba(0,0,0,.35);
  --lv-text:#F2F5F7; --lv-muted:#93A2AC; --lv-ok:#3DDC84; --lv-flash:rgba(92,200,194,.30);
  --flow-dot:#5CC8C2; --card-glow:rgba(0,116,124,.12); --btn-sweep:rgba(255,255,255,.28);
  /* futuristic layer */
  --pen-1:#5CC8C2; --pen-2:#F2B33D; --pen-3:#6FA8FF;
  --grid-line:rgba(92,200,194,.16); --led:#5CC8C2; --spot:rgba(92,200,194,.10);
  --glass-bg:rgba(30,44,54,.55); --glass-line:rgba(147,175,185,.18); --glass-hot:rgba(92,200,194,.55); --glass-shadow:0 10px 30px rgba(0,0,0,.25);
  --pipe:#2E3F4A; --node-bg:#1A262E; --node-line:#3A4E5A; --mini-bg:#18232A;
  --alarm:#E5484D; --alarm-glow:rgba(229,72,77,.35); --alarm-bg:rgba(229,72,77,.12);
  --accent-on:#00A3A3; --on-accent:#04161A;
  --gauge-track:#DCE3E7;
  --hdr-shadow:0 6px 20px rgba(26,35,41,.10);
  --live-bg:#1F2B33; --live-text:#E6F4F3; --live-dot:#3DDC84; --live-shadow:0 4px 14px rgba(0,0,0,.35);
  --glow-a:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(92,200,194,.15);
  --glow-b:0 24px 60px rgba(0,0,0,.45),0 0 36px 2px rgba(92,200,194,.28);
  --lock-accent:#00747C;
  --badge-bg:rgba(92,200,194,.12); --badge-text:#CFEDEB; --badge-line:rgba(92,200,194,.35); --badge-dot:#5CC8C2;
  --strip-icon:#5CC8C2; --strip-title:#F2F5F7;
  /* Component colours (from styles.css) */
  --x1:rgba(237,238,233,.97);
  --x2:#fff;
  --x3:#9aa0a6;
  --x4:rgba(0,0,0,.45);
  --x5:rgba(21,25,28,.055);
  --x6:rgba(21,25,28,.42);
  --x7:#00747c;
  --x8:#00636a;
  --x9:#b7bbb2;
  --x10:#8e948b;
  --x11:#2a3138;
  --x12:#3d474d;
  --x13:#8b969c;
  --x14:#0b0e10;
  --x15:#2a3238;
  --x16:#000;
  --x17:rgba(0,0,0,.2);
  --x18:#afbac0;
  --x19:#6e7a81;
  --x20:#96a2a8;
  --x21:#5d696f;
  --x22:#c8d1d5;
  --x23:#e7ebea;
  --x24:rgba(0,0,0,.25);
  --x25:rgba(0,116,124,.18);
  --x26:#20282d;
  --x27:#2a333a;
  --x28:#f2f5f4;
  --x29:#262e33;
  --x30:#a9b4b9;
  --x31:#aeb3a8;
  --x32:#fbf7ee;
  --x33:#dfb771;
  --x34:#e1eff0;
  --x35:#bfdddf;
  --x36:#aeb9be;
  --x37:#cbd4d8;
  --x38:#bcc1b6;
  --x39:rgba(21,25,28,.045);
  --x40:#8a918b;
  --x41:#3b454b;
  --x42:rgba(255,255,255,.045);
  --x43:#1f2529;
  --x44:#c3c7bd;
  --x45:#6f7a80;
  --x46:#242c31;
  --x47:rgba(0,116,124,.25);
  --x48:#e3e8eb;
  --x49:rgba(26,35,41,.05);
  --x50:rgba(26,35,41,.06);
  --x51:rgba(26,35,41,.10);
  --x52:rgba(255,255,255,.85);
  --x53:#5cc8c2;
  --x54:#d6dce0;
  --x55:rgba(26,35,41,.14);
  --x56:#34454f;
}
/* Dark areas: light eye with teal pupil */
.ftr,.dark,.hero,.phead,.strip{--eye:#E6EAE9;--pupil:#00747C;--lock-accent:#5CC8C2}


/* "Try it" mini SCADA: light panel */
.sec--try{--try-bg:#EEF1F3; --glass-bg:#FFFFFF; --glass-line:#D6DCE0; --glass-shadow:0 10px 30px rgba(26,35,41,.10); --mini-bg:#FFFFFF;
  --lv-text:#1A2329; --lv-muted:#5B6770; --node-bg:#F4F6F8; --node-line:#C9D2D8; --pipe:#C9D2D8; --pen-2:#D08A00; --accent-on:#00747C; --on-accent:#FFFFFF; --lv-ok:#2C7A2C}