/* Minimal reset + base styles shared by all gohegan.net surfaces.
   Load AFTER colors_and_type.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
::selection { background: var(--accent); color: var(--accent-fg); }

/* Focus ring — keyboard only, restrained */
:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-2);
}

/* Generic interactive primitives reused across surfaces */
.hg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-3);
  border: 1px solid var(--border-strong);
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.hg-btn:hover  { background: var(--bg-1); }
.hg-btn:active { background: var(--bg-2); }

.hg-btn--primary {
  background: var(--fg-0);
  color: var(--bg-0);
  border-color: var(--fg-0);
}
.hg-btn--primary:hover  { background: #262626; border-color: #262626; }
.hg-btn--primary:active { background: #404040; border-color: #404040; }

.hg-btn--accent {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.hg-btn--accent:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.hg-btn--accent:active { background: var(--accent-press); border-color: var(--accent-press); }

.hg-btn--ghost {
  border-color: transparent;
  background: transparent;
}
.hg-btn--ghost:hover { background: var(--bg-2); }

.hg-btn--sm { padding: 5px 10px; font-size: var(--fs-13); border-radius: var(--r-2); }

.hg-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--fg-0);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.hg-input::placeholder { color: var(--fg-3); }
.hg-input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.hg-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
}

.hg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--bg-2);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  border: 1px solid var(--border);
}
.hg-badge--ok      { background: var(--success-tint); color: #166534; border-color: var(--success-edge); }
.hg-badge--warn    { background: var(--warning-tint); color: #92400e; border-color: var(--warning-edge); }
.hg-badge--err     { background: var(--danger-tint); color: #991b1b; border-color: var(--danger-edge); }
.hg-badge--info    { background: var(--accent-tint); color: #1e40af; border-color: var(--accent-edge); }

.hg-divider {
  height: 1px;
  background: var(--border);
  border: 0;
}

/* Mono "tape" of network metadata — used in hero areas and footers */
.hg-tape {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-2);
  letter-spacing: var(--tr-mono);
}
.hg-tape span > b { color: var(--fg-0); font-weight: 500; }

/* Subtle network-grid backdrop, used on hero panels */
.hg-grid-bg {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}