/* SYNAPLOT — shared tokens */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:#0E3B36;        /* deep warehouse green */
  --ink-2:#16524B;
  --ink-soft:#5E8C84;
  --paper:#F5F7F4;      /* cool off-white */
  --white:#FFFFFF;
  --line:#D8DED9;
  --slate:#55655F;
  --text:#18221F;
  --signal:#F2C230;     /* floor-marking yellow */
  --signal-soft:#FBEFC4;
  --low:#C8402F;
  --low-soft:#F7DED9;
  --ok:#2E7D56;
  --ok-soft:#DCEFE4;
  --info:#2F5E9E;
  --info-soft:#DDE7F4;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;
  --r-sm:4px; --r-md:8px; --r-lg:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--text);background:var(--paper)}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-stretch:112%;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:2px}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.7em 1.2em;border-radius:var(--r-md);border:1.5px solid transparent;font-weight:600;text-decoration:none;font-size:.95rem;line-height:1.2;transition:background .15s,border-color .15s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink-2)}
.btn-signal{background:var(--signal);color:var(--ink)}
.btn-signal:hover{background:#E6B520}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--ink-soft)}
.btn-sm{padding:.45em .8em;font-size:.85rem}

.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--display);font-weight:800;font-stretch:125%;letter-spacing:.02em;font-size:1.15rem}
.brand img{width:30px;height:30px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* status pills */
.pill{display:inline-block;padding:.15em .6em;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.low{background:var(--low-soft);color:var(--low)}
.pill.warn{background:var(--signal-soft);color:#7A5B00}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.mute{background:#ECEFEC;color:var(--slate)}