/* RegistryReach shared stylesheet: the single code home for design tokens.
   Source of truth for the VALUES is docs/design.md; this file is where they live in CSS,
   linked by every marketing page and the Flask-served pages so a token change is one edit.
   Bump the ?v= query on the <link> when this file changes, to bust Cloudflare's cache.
   The in-HubSpot app card stays self-contained inline (see design.md §3) and does not use this. */
:root {
  --ink:#12242e;
  --teal:#0e7c86;
  --deep:#0b3c46;
  --mist:#f2f8f9;
  --slate:#3c5560;
  --muted:#566d77;
  --line:#dde9eb;
  --card:#fff;
  --head:#0b3c46;
  --amber:#e8913a;
  --amber-ink:#3a2400;
  --amber-deep:#a85d16;
  --amber-d:#c8781f;
  --amber-mist:#fdf6ee;
  --teal-mist:#eef4f4;
  --success:#1f9d55;
  --error:#c0392b;
  color-scheme:light dark;
}

/* --- Site chrome: sticky header + nav + footer (marketing pages + state pages) ---
   Nav rules are scoped to `header nav` on purpose: the /lists page's nav lives in a
   .sitehead <div> (not a <header>) and keeps its own .sitenav styles. The app pages
   (server.py BUILD/FEEDBACK/CONTACT) have their own simpler <header>; their inline
   styles override where they differ. Footer content stays per-page; only the look is shared. */
.skip-link{position:absolute;left:8px;top:-48px;z-index:100;background:var(--teal);color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:700;font-size:14px}
.skip-link:focus{top:8px}
header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hmark{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--head);text-decoration:none}
.hdot{position:relative;width:30px;height:30px;border-radius:8px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.hdot::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--amber);border:2px solid #fff}
header nav a{color:var(--slate);text-decoration:none;margin-left:22px;font-size:14.5px;font-weight:600}
header nav a:hover{color:var(--teal)}
.navtoggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.navtoggle:focus-visible + .hamburger{outline:2px solid var(--teal);outline-offset:2px}
.hamburger{display:none;cursor:pointer;user-select:none;padding:8px 6px}
.hamburger span{display:block;width:22px;height:2px;background:var(--deep);margin:5px 0;transition:transform .25s ease,opacity .2s ease}
.navtoggle:checked + .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle:checked + .hamburger span:nth-child(2){opacity:0}
.navtoggle:checked + .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:680px){
  header{flex-wrap:wrap}
  .hamburger{display:block}
  header nav{order:3;display:none;width:100%;flex-direction:column;margin-top:10px}
  .navtoggle:checked ~ nav{display:flex}
  header nav a{margin-left:0;padding:12px 2px;border-top:1px solid var(--line);font-size:16px}
  header nav a[href="/install"]{border-top:none;margin-top:8px;text-align:center}
}
footer{text-align:center;padding:26px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
footer a{color:var(--teal);text-decoration:none}
footer a:hover{text-decoration:underline}

.hmark-ico{width:30px;height:30px;border-radius:8px;vertical-align:middle;margin-right:6px}

/* DARK MODE (prefers-color-scheme): parity with siblings. --deep stays dark (it is a background 111x);
   its chrome text/bars get explicit light overrides. --ink is text-only, safe to flip. */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#E6EEF0;
    --teal:#159AA6;
    --mist:#0F1A1E;
    --slate:#B8C7CD;
    --muted:#8FA0A7;
    --line:rgba(255,255,255,.12);
    --card:#141F23;
    --head:#E6EEF0;
    --amber-mist:rgba(232,145,58,.14);
    --teal-mist:rgba(21,154,166,.14);
    --success:#43CE7B;
    --error:#E06B5C;
  }
  header{background:rgba(15,26,30,.9)}
  .hmark{color:#E6EEF0}
  .hamburger span{background:#E6EEF0}
}