/* HEVRYN base styles. Every value is a token from tokens.css (BRD-004).
   Mobile-first; layout scales up at --hv-bp-* breakpoints. */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--hv-color-bg0);
  color: var(--hv-color-text);
  font-family: var(--hv-font-sans);
  font-size: 100%;
  line-height: var(--hv-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

body { margin: 0; min-height: 100dvh; }

h1, h2, h3, h4 {
  font-family: var(--hv-font-display);
  line-height: var(--hv-leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--hv-space-3);
}
h1 { font-size: var(--hv-size-xxl); font-weight: var(--hv-weight-bold); }
h2 { font-size: var(--hv-size-xl); font-weight: var(--hv-weight-semibold); }
h3 { font-size: var(--hv-size-lg); font-weight: var(--hv-weight-semibold); }
p { margin: 0 0 var(--hv-space-3); }
a { color: var(--hv-color-accent); text-decoration: none; }
a:hover { color: var(--hv-color-accent-hover); }
code, .mono { font-family: var(--hv-font-mono); font-size: var(--hv-size-sm); }

/* Focus is visible everywhere; it is how keyboard users know where they are. */
:focus-visible { outline: var(--hv-state-focus-outline); outline-offset: var(--hv-state-focus-offset); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- layout --- */
.hv-shell { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; }
.hv-container { width: min(100% - 2 * var(--hv-space-4), 1200px); margin-inline: auto; }
.hv-stack > * + * { margin-top: var(--hv-space-4); }
.hv-grid { display: grid; gap: var(--hv-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .hv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .hv-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- navigation --- */
.hv-nav {
  display: flex; align-items: center; gap: var(--hv-space-4);
  padding: var(--hv-space-3) var(--hv-space-4);
  border-bottom: 1px solid var(--hv-color-line);
  background: var(--hv-color-bg1);
  position: sticky; top: 0; z-index: 10;
}
.hv-nav__brand { font-family: var(--hv-font-display); font-weight: var(--hv-weight-bold); letter-spacing: 0.08em; color: var(--hv-color-text); }
.hv-nav__links { display: flex; gap: var(--hv-space-3); margin-left: auto; overflow-x: auto; }
.hv-nav__links a { color: var(--hv-color-text-muted); font-weight: var(--hv-weight-medium); padding: var(--hv-space-2) var(--hv-space-3); border-radius: var(--hv-radius-sm); white-space: nowrap; }
.hv-nav__links a[aria-current="page"], .hv-nav__links a:hover { color: var(--hv-color-text); background: var(--hv-color-bg3); }
.hv-nav__links a[data-brand="arena"][aria-current="page"] { color: var(--hv-color-arena); }
.hv-nav__links a[data-brand="proof"][aria-current="page"] { color: var(--hv-color-proof); }

/* --- surfaces --- */
.hv-card {
  background: var(--hv-color-bg2);
  border: 1px solid var(--hv-color-line);
  border-radius: var(--hv-radius-lg);
  padding: var(--hv-space-5);
  box-shadow: var(--hv-shadow-card);
}
.hv-card--accent { border-color: var(--hv-color-accent-soft); }
.hv-card--arena { border-left: 3px solid var(--hv-color-arena); }
.hv-card--proof { border-left: 3px solid var(--hv-color-proof); }

/* --- controls --- */
.hv-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hv-space-2);
  min-height: 44px; padding: var(--hv-space-2) var(--hv-space-5);
  border-radius: var(--hv-radius-md); border: 1px solid transparent;
  font: inherit; font-weight: var(--hv-weight-semibold); cursor: pointer;
  transition: background var(--hv-motion-fast) var(--hv-motion-ease), opacity var(--hv-motion-fast) var(--hv-motion-ease);
  background: var(--hv-color-bg3); color: var(--hv-color-text);
}
.hv-button:hover { opacity: var(--hv-state-hover-opacity); }
.hv-button:disabled, .hv-button[aria-disabled="true"] { opacity: var(--hv-state-disabled-opacity); cursor: not-allowed; }
.hv-button--primary { background: var(--hv-color-accent); color: var(--hv-color-text-on-accent); }
.hv-button--primary:hover { background: var(--hv-color-accent-hover); opacity: 1; }
.hv-button--danger { background: var(--hv-color-negative); color: var(--hv-color-text-on-accent); }
.hv-button--ghost { background: transparent; border-color: var(--hv-color-line-strong); }

.hv-field { display: grid; gap: var(--hv-space-1); margin-bottom: var(--hv-space-4); }
.hv-field label { font-size: var(--hv-size-sm); color: var(--hv-color-text-muted); font-weight: var(--hv-weight-medium); }
.hv-input, .hv-select {
  min-height: 44px; width: 100%; padding: var(--hv-space-2) var(--hv-space-3);
  background: var(--hv-color-bg1); color: var(--hv-color-text);
  border: 1px solid var(--hv-color-line-strong); border-radius: var(--hv-radius-md);
  font: inherit;
}
.hv-input:focus, .hv-select:focus { border-color: var(--hv-color-accent); box-shadow: var(--hv-shadow-focus); outline: none; }
.hv-input[aria-invalid="true"] { border-color: var(--hv-color-negative); }
.hv-hint { font-size: var(--hv-size-xs); color: var(--hv-color-text-faint); }
.hv-error { color: var(--hv-color-negative); font-size: var(--hv-size-sm); }

/* --- money and status --- */
.hv-money { font-family: var(--hv-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--hv-weight-semibold); }
.hv-money--positive { color: var(--hv-color-positive); }
.hv-money--negative { color: var(--hv-color-negative); }
.hv-badge {
  display: inline-block; padding: 2px var(--hv-space-2); border-radius: var(--hv-radius-pill);
  font-size: var(--hv-size-xs); font-weight: var(--hv-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--hv-color-bg3); color: var(--hv-color-text-muted);
}
.hv-badge--ok { background: rgba(61, 214, 140, 0.12); color: var(--hv-color-positive); }
.hv-badge--warn { background: rgba(245, 165, 36, 0.14); color: var(--hv-color-warning); }
.hv-badge--bad { background: rgba(240, 96, 90, 0.14); color: var(--hv-color-negative); }
.hv-badge--info { background: rgba(90, 169, 245, 0.14); color: var(--hv-color-info); }

.hv-table { width: 100%; border-collapse: collapse; font-size: var(--hv-size-sm); }
.hv-table th, .hv-table td { text-align: left; padding: var(--hv-space-2) var(--hv-space-3); border-bottom: 1px solid var(--hv-color-line); }
.hv-table th { color: var(--hv-color-text-muted); font-weight: var(--hv-weight-medium); }
.hv-table-wrap { overflow-x: auto; }

/* --- states: loading, empty, error --- */
.hv-skeleton { background: linear-gradient(90deg, var(--hv-color-bg2), var(--hv-color-bg3), var(--hv-color-bg2)); background-size: 200% 100%; animation: hv-shimmer 1.2s infinite; border-radius: var(--hv-radius-sm); min-height: 1em; }
@keyframes hv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.hv-empty { text-align: center; color: var(--hv-color-text-muted); padding: var(--hv-space-7) var(--hv-space-4); }
.hv-alert { padding: var(--hv-space-3) var(--hv-space-4); border-radius: var(--hv-radius-md); border: 1px solid var(--hv-color-line); background: var(--hv-color-bg2); }
.hv-alert--error { border-color: rgba(240, 96, 90, 0.4); }
.hv-alert--success { border-color: rgba(61, 214, 140, 0.4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}