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

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./assets/fonts/space-grotesk-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

:root {
  --ink: #0d0b12;
  --ink-soft: #5f5a67;
  --paper: #f6f3f7;
  --panel: #ffffff;
  --line: #d9d5dd;
  --line-strong: #b9b5c2;
  --accent: #7557e8;
  --accent-dark: #5637bd;
  --success: #137250;
  --control-surface: #faf8fb;
  --control-track: #ebe8ee;
  --selected-surface: #efecf6;
  --muted-surface: #f2eff4;
  --focus-ring: rgba(52, 120, 246, 0.28);
  --panel-shadow: 0 8px 24px rgba(13, 11, 18, 0.07);
  --shadow: var(--panel-shadow);
  --radius: 8px;
  --bi-spectrum: linear-gradient(
    90deg,
    #26d6a0 0%,
    #3478f6 22%,
    #7557e8 42%,
    #e75bad 61%,
    #f0644b 79%,
    #f1cf49 100%
  );
}

:root[data-theme="dark"] {
  --ink: #f6f3f7;
  --ink-soft: #b9b5c2;
  --paper: #0d0b12;
  --panel: #1a1621;
  --line: #39333f;
  --line-strong: #635d69;
  --accent: #7da6ff;
  --accent-dark: #ad98ff;
  --success: #55d8a8;
  --control-surface: #151119;
  --control-track: #29232f;
  --selected-surface: #332b3d;
  --muted-surface: #201b26;
  --focus-ring: rgba(52, 120, 246, 0.46);
  --panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow: var(--panel-shadow);
}

body {
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variation-settings: "opsz" 16;
}

.site-header {
  position: relative;
  color: #f6f3f7;
  background: #0d0b12;
  border-bottom-color: #2b2631;
}

.site-header::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--bi-spectrum);
  content: "";
}

.site-header .brand,
.site-header .brand-name,
.site-header .site-nav-links a,
.site-header .header-meta,
.site-header .theme-toggle {
  color: #f6f3f7;
}

.site-header .brand-name {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
}

.site-header .brand-name small,
.site-header .theme-toggle-state {
  color: #b9b5c2;
}

.site-header .site-nav-links a:hover,
.site-header .site-nav-links a[aria-current="page"] {
  color: #ffffff;
  background: #25202b;
}

.site-header .site-nav-links a[aria-current="page"] {
  box-shadow: inset 0 -2px #26d6a0;
}

.site-header .theme-toggle {
  background: #1a1621;
  border-color: #4a4351;
}

.site-header .theme-toggle:hover {
  border-color: #b9b5c2;
}

.brand-mark {
  filter: saturate(0.92) contrast(1.04);
}

.hero h1,
.info-hero h1,
h1,
.section-title,
.info-content h2,
.method h2,
.digest-heading h2,
.detail-panel h2,
.detail-lead,
.stat-value,
.countdown strong {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

.hero h1,
.info-hero h1,
h1 {
  line-height: 1.02;
}

.eyebrow,
.info-kicker,
.detail-kicker,
.detail-status,
.search-label,
.stat-label,
.field label,
.filter-head h3,
.section-nav p,
.source-table th,
th,
.support-slot span,
.sponsor-slot span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0;
}

.panel,
.map-layout,
.toolbar,
.source-table-wrap,
.info-note {
  border-color: var(--line);
}

.panel,
.map-layout {
  background: var(--panel);
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .support-slot,
:root[data-theme="dark"] .update-note {
  background: var(--panel);
  border-color: var(--line);
}

.toolbar,
.filters,
.source-table th {
  background: var(--control-surface);
}

:root[data-theme="dark"] .filters,
:root[data-theme="dark"] th {
  background: var(--control-surface);
}

.hero-link,
.detail-link,
.toolbar-button,
.row-button,
.theme-toggle,
.ghost-button,
.contact-action,
select,
.slider-wrap,
.search-field {
  border-radius: 8px;
}

.segment,
.range-button,
.text-button,
.chip {
  border-radius: 4px;
}

.segmented,
.range-control {
  background: var(--control-track);
  border-color: var(--line);
}

:root[data-theme="dark"] .range-control {
  background: var(--control-track);
  border-color: var(--line);
}

.segment.is-active,
.range-button[aria-pressed="true"] {
  background: var(--panel);
}

.chip[aria-pressed="true"] {
  background: var(--selected-surface);
  border-color: var(--line-strong);
}

.chip[aria-pressed="false"] {
  background: var(--muted-surface);
  border-color: var(--line);
}

:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .chip[aria-pressed="false"] {
  background: var(--muted-surface);
  border-color: var(--line);
}

:root[data-theme="dark"] .chip[aria-pressed="true"] {
  background: var(--selected-surface);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] .ghost-button,
:root[data-theme="dark"] .slider-wrap {
  background: var(--panel);
  border-color: var(--line-strong);
}

button,
a,
select,
input {
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid #3478f6;
  outline-offset: 3px;
}

.site-footer {
  background: color-mix(in srgb, var(--paper) 86%, var(--panel));
}

@media (max-width: 860px) {
  .site-header .site-nav-links {
    border-top-color: #2b2631;
  }
}

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