/* Wi-Fi Scanner — shared design tokens, base + shared components.
   Single source of truth for both index.html and privacy.html. */

:root{
  /* Color */
  --brand:#2563eb; --brand-2:#0ea5e9; --ok:#16a34a;
  --ink:#0f1720; --muted:#5b6b7b; --bg:#f6f8fb; --card:#ffffff; --line:#e6ebf1;
  /* Radius scale */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  /* Layout */
  --maxw:1080px;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e8eef6; --muted:#93a2b3; --bg:#0b0f14; --card:#131a22; --line:#232d38; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--brand);color:#fff;
  text-decoration:none;font-weight:700;padding:.9em 1.4em;border-radius:var(--r-md);
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 60%,transparent);
  transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.on-brand{background:#fff;color:var(--brand)}

/* Brand mark */
.brand{display:flex;align-items:center;gap:.55em;font-weight:800;text-decoration:none;color:var(--ink)}
.brand .logo{width:30px;height:30px;border-radius:var(--r-sm);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232563eb'/%3E%3Cstop offset='1' stop-color='%230ea5e9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' rx='22' fill='url(%23g)'/%3E%3Cg fill='none' stroke='white' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M22 46a40 40 0 0 1 56 0'/%3E%3Cpath d='M33 58a24 24 0 0 1 34 0'/%3E%3C/g%3E%3Ccircle cx='50' cy='72' r='6' fill='white'/%3E%3C/svg%3E")}

/* Footer (shared) */
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:.9rem}
footer a{color:var(--muted);text-decoration:none;margin-right:18px}
footer a:hover{color:var(--ink)}

/* A11y: visible keyboard focus */
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px;border-radius:4px}
.btn:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 70%,transparent);outline-offset:3px}

/* A11y: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .btn:hover{transform:none}
}