/* base.css — reset, typography, color tokens, theme handling.
   Visual language follows hashdit.io: light by default, HashDit blue as the
   primary color, soft gradients on raised cards, generous radii. This is
   our own markup/CSS; no hashdit.io text, illustrations or images other
   than the HashDit mark itself (web/static/img/hashdit.svg), used as-is. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Light theme (default) */
  --bg: #f7f9fc;
  --bg-elevated: #ffffff;
  --bg-raised: #f6f7f7;
  --bg-sunken: #f3f5f8;
  --fg: #1a202c;
  --fg-muted: #4a5568;
  --fg-subtle: #9ca3af;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #4063ff;
  --accent-hover: #3385ff;
  --accent-fg: #ffffff;
  --accent-muted: rgba(64, 99, 255, 0.1);
  --accent-soft: #e6efff;
  --danger: #e5484d;
  --danger-muted: #fff5f5;
  --warn: #ff8c00;
  --warn-muted: rgba(255, 140, 0, 0.1);
  --ok: #00a186;
  --ok-muted: rgba(0, 161, 134, 0.1);
  --link: var(--accent);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --radius: 9px;
  --radius-lg: 14px;
  --card-gradient: linear-gradient(180deg, #ffffff 0%, #f6f7f7 100%);
  --hero-gradient: radial-gradient(120% 80% at 10% -10%, #e6efff 0%, #f7f9fc 42%, #f3f5f8 100%);
  --row-hover: rgba(64, 99, 255, 0.04);

  /* Graph node colors -- fixed across both themes so traces read the same
     regardless of the page theme. */
  --kind-attacker: #e5484d;
  --kind-victim: #4063ff;
  --kind-exchange: #00a186;
  --kind-bridge: #7c5cff;
  --kind-dex: #2ebdee;
  --kind-mixer: #ff8c00;
  --kind-service: #4a5568;
  --kind-unknown: #9ca3af;

  /* High-risk accent (e.g. address-poisoning look-alikes) -- fixed across
     both themes, distinct from the amber "warn"/"stale" meaning. */
  --highrisk: #f34e02;
  --highrisk-muted: rgba(243, 78, 2, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1320;
    --bg-elevated: #151b2b;
    --bg-raised: #1a2234;
    --bg-sunken: #1b2336;
    --fg: #e6eaf2;
    --fg-muted: #9aa4b8;
    --fg-subtle: #6b7688;
    --border: #232b3d;
    --border-strong: #2f3a52;
    --accent: #4d7bff;
    --accent-hover: #3385ff;
    --accent-fg: #ffffff;
    --accent-muted: rgba(77, 123, 255, 0.16);
    --accent-soft: #19233d;
    --danger: #ff6369;
    --danger-muted: rgba(255, 99, 105, 0.14);
    --warn: #ffa229;
    --warn-muted: rgba(255, 162, 41, 0.14);
    --ok: #28d2ac;
    --ok-muted: rgba(40, 210, 172, 0.14);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
    --card-gradient: linear-gradient(180deg, #171e30 0%, #151b2b 100%);
    --hero-gradient: radial-gradient(120% 80% at 10% -10%, #19233d 0%, #0e1320 42%, #0e1320 100%);
    --row-hover: rgba(77, 123, 255, 0.08);
  }
}

:root[data-theme="dark"] {
  --bg: #0e1320;
  --bg-elevated: #151b2b;
  --bg-raised: #1a2234;
  --bg-sunken: #1b2336;
  --fg: #e6eaf2;
  --fg-muted: #9aa4b8;
  --fg-subtle: #6b7688;
  --border: #232b3d;
  --border-strong: #2f3a52;
  --accent: #4d7bff;
  --accent-hover: #3385ff;
  --accent-fg: #ffffff;
  --accent-muted: rgba(77, 123, 255, 0.16);
  --accent-soft: #19233d;
  --danger: #ff6369;
  --danger-muted: rgba(255, 99, 105, 0.14);
  --warn: #ffa229;
  --warn-muted: rgba(255, 162, 41, 0.14);
  --ok: #28d2ac;
  --ok-muted: rgba(40, 210, 172, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
  --card-gradient: linear-gradient(180deg, #171e30 0%, #151b2b 100%);
  --hero-gradient: radial-gradient(120% 80% at 10% -10%, #19233d 0%, #0e1320 42%, #0e1320 100%);
  --row-hover: rgba(77, 123, 255, 0.08);
}

:root[data-theme="light"] {
  --bg: #f7f9fc;
  --bg-elevated: #ffffff;
  --bg-raised: #f6f7f7;
  --bg-sunken: #f3f5f8;
  --fg: #1a202c;
  --fg-muted: #4a5568;
  --fg-subtle: #9ca3af;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #4063ff;
  --accent-hover: #3385ff;
  --accent-fg: #ffffff;
  --accent-muted: rgba(64, 99, 255, 0.1);
  --accent-soft: #e6efff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --card-gradient: linear-gradient(180deg, #ffffff 0%, #f6f7f7 100%);
  --hero-gradient: radial-gradient(120% 80% at 10% -10%, #e6efff 0%, #f7f9fc 42%, #f3f5f8 100%);
  --row-hover: rgba(64, 99, 255, 0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light dark; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 0 0 0.5em; letter-spacing: -0.012em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.75em; color: var(--fg-muted); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--font-mono); }

ul, ol { padding-left: 1.3em; }

table { border-collapse: collapse; width: 100%; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection { background: var(--accent-muted); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}