/* HellaGood portal — GRAPHITE (founder pick 2026-09-05, option A): pure neutral greys so the
   marketing flame is the only warm thing on screen. Wide ground/card/line steps — nothing melts. */
:root {
  --ground:#F4F4F3; --card:#FFFFFF; --raise:#FAFAF9; --line:#DFDEDC;
  --ink:#191919; --muted:#71706D; --accent:#E14E24; --accent-ink:#FFFFFF;
  --tint:#FBEAE3; --good:#1E8E5A; --warn:#B7791F; --danger:#C0392B; --flame:#FF4D24;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#121214; --card:#1D1D21; --raise:#232327; --line:#333338;
    --ink:#F2F1EF; --muted:#A5A3A0; --accent:#FF6A42; --accent-ink:#1A0E08;
    --tint:#2C2320; --good:#57C08A; --warn:#E0A94E; --danger:#E07060; --flame:#FF6B45;
  }
}
:root[data-theme="dark"] {
  --ground:#121214; --card:#1D1D21; --raise:#232327; --line:#333338;
  --ink:#F2F1EF; --muted:#A5A3A0; --accent:#FF6A42; --accent-ink:#1A0E08;
  --tint:#2C2320; --good:#57C08A; --warn:#E0A94E; --danger:#E07060; --flame:#FF6B45;
}
/* theme slider (injected by hg-theme.js into every header) */
.theme-switch { width:54px; height:28px; min-width:54px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); position:relative; cursor:pointer; padding:0; }
.theme-switch .knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--tint); display:flex; align-items:center; justify-content:center; font-size:13px;
  transition:left .18s ease; }
.theme-switch[data-mode="dark"] .knob { left:28px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width:920px; margin:0 auto; padding:0 16px 80px; }
.brand { font-weight:800; letter-spacing:.02em; }
.brand em { color:var(--flame); font-style:normal; }
button, .btn { font:inherit; border:0; border-radius:10px; padding:10px 18px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-weight:600; text-decoration:none; display:inline-block; }
button.ghost, .btn.ghost { background:var(--card); color:var(--ink); border:1px solid var(--line); }
button.danger { background:transparent; color:var(--danger); border:1px solid var(--line); }
button:disabled { opacity:.5; cursor:default; }
input, textarea, select { font:inherit; width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--card); color:var(--ink); }
label { display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin:14px 0 5px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.muted { color:var(--muted); } .small { font-size:13.5px; }
.err { color:var(--danger); font-size:14px; min-height:1.2em; }
.ok { color:var(--good); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pill { font-size:12.5px; font-weight:700; border-radius:999px; padding:3px 10px; background:var(--tint); color:var(--accent); }
.rid { font-family:ui-monospace, Menlo, monospace; font-size:13px; color:var(--muted); }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* chip picker (hg-chips.js) — wizard + Business Info */
.chips-pick { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chips-pick button { background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; font-size:14px; }
.chips-pick button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.chips-pick button.pick { border-style:dashed; color:var(--muted); }
.chips-pick button.small { padding:6px 12px; font-size:13px; }