/* ==========================================================================
   Vindicator — token system + base components
   Colors + chamfer model: distilled from the actual game source
   (P:\Vindicator\common\UiThemeTokens.cs, ChamferStyleBox.cs, Palette.cs)
   — NOT the earlier vindicator-site-plan.md palette, which was outdated.
   Fonts not yet self-hosted: @font-face blocks in fonts.css point at files
   that still need to land in /vindicator/fonts/.
   ========================================================================== */

@import url("fonts.css");

:root {
  /* Colors — 1:1 from UiThemeTokens.cs */
  --bg-deep: #060B12;         /* Background */
  --panel-base: #0E1826;      /* PanelBase */
  --signal: #83C3FF;          /* Signal — primary accent (rails, links, headers) */
  --cassius: #F59A56;         /* Cassius — AI-comms orange */
  --fold: #91A6FF;            /* Fold — exotic/fold-drive accent */
  --online: #00E676;          /* Online — success / credits / primary CTA */
  --hull-red: #E05555;        /* hull meter */
  --armor-yellow: #E0C060;    /* armor meter */
  --shield-blue: #7FD6FF;     /* shield meter */
  --energy-blue: #4FA8E0;     /* energy meter */
  --nav-ink: #D0D0D0;         /* primary text */
  --text-muted: #8FA3B8;
  --text-dim: #7C93A5;        /* raised vs. the game's dim tone — pure NavInk@50% fails WCAG AA at small sizes */

  --rail: rgba(131, 195, 255, 0.55); /* Rail = Signal @ 55% — the 1px outline used everywhere */
  --steel-rail: #B5CBE0;             /* SteelRail = Mix(NavInk, Signal, 0.35) — resting button rail, so Signal hover reads as a step up */
  --grid-major: rgba(131, 195, 255, 0.11); /* GridMajor = Signal @ 11% — 64px grid lines */
  --grid-minor: rgba(131, 195, 255, 0.05); /* GridMinor = Signal @ 5% — 16px grid lines */
  --muted-ink: rgba(208, 208, 208, 0.5);   /* MutedInk = NavInk @ 50% — decorative only; use --text-dim for readable copy */

  /* Typography */
  --font-display: "Asimovian", "Orbitron", sans-serif;
  --font-body: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --font-numeric: "Doto", "JetBrains Mono", monospace; /* marketing-only pairing — Doto ships in-repo but is unused by the game's own HUD */

  /* Shape — chamfer sizes match ChamferStyleBox usage per surface */
  --chamfer-panel: 14px;   /* OverlayChrome / OverlayPanel */
  --chamfer-tooltip: 10px; /* TooltipCard / MinimapPanel */
  --chamfer-button: 8px;   /* OverlayButton / default chips */
  --chamfer-chip-sm: 6px;  /* small map hint chips */
  --rail-width: 1px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
}

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

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--nav-ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--signal);
}

/* --------------------------------------------------------------------
   Chamfer utility — 45° cut corners via clip-path (octagon), no
   border-radius. Mirrors ChamferStyleBox's ChamferPoints geometry.
   -------------------------------------------------------------------- */

.chamfer {
  --c: var(--chamfer-panel);
  clip-path: polygon(
    var(--c) 0,
    100% 0,
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    0 100%,
    0 var(--c)
  );
}

.chamfer-sm {
  --c: var(--chamfer-button);
}

/* --------------------------------------------------------------------
   Glass panel
   -------------------------------------------------------------------- */

.panel {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(14, 24, 38, 0.90) 0%,
    rgba(7, 13, 20, 0.95) 100%
  );
  border: var(--rail-width) solid var(--rail);
  padding: var(--space-4);
  transition: border-color 0.2s ease;
}

.panel::before {
  /* top highlight line */
  content: "";
  position: absolute;
  top: 1px;
  left: var(--space-3);
  right: var(--space-3);
  height: 1px;
  background: rgba(214, 228, 238, 0.1);
  pointer-events: none;
}

.panel::after {
  /* static scanlines — ChamferStyleBox draws these on every panel, always on */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(131, 195, 255, 0.04) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.panel:hover {
  border-color: var(--signal);
}

/* --------------------------------------------------------------------
   Chip — system-label style (SystemHeaderChip/CreditsChip)
   -------------------------------------------------------------------- */

.chip {
  --c: var(--chamfer-button);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--signal);
  background: rgba(131, 195, 255, 0.06);
  border: var(--rail-width) solid var(--rail);
  clip-path: polygon(
    var(--c) 0,
    100% 0,
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    0 100%,
    0 var(--c)
  );
}

/* --------------------------------------------------------------------
   Button
   -------------------------------------------------------------------- */

.btn {
  --c: var(--chamfer-button);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  clip-path: polygon(
    var(--c) 0,
    100% 0,
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    0 100%,
    0 var(--c)
  );
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--online);
  color: var(--bg-deep);
  font-weight: 600;
}

.btn-primary:hover {
  filter: brightness(1.15);
}

.btn-primary:active {
  transform: translateY(1px);
}

/* .btn-glass mirrors the game's OverlayButton 3-state model
   (UiThemeTokens.StyleButton): rail + label + glass fill per state.
   Fills are Mix(Background, railColor, w) with the top stop Lightened(0.06). */

.btn-glass {
  /* rest: SteelRail rail, fill w=0.10 @ 80%, NavInk label */
  position: relative;
  color: var(--nav-ink);
  border: var(--rail-width) solid rgba(181, 203, 224, 0.9);
  background: linear-gradient(
    180deg,
    rgba(38, 44, 52, 0.80) 0%,
    rgba(24, 30, 39, 0.80) 100%
  );
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-glass::after {
  /* button scanlines — ChamferStyleBox draws these at 3% on OverlayButton */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(131, 195, 255, 0.03) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.btn-glass:hover,
.btn-glass:focus-visible {
  /* hover/focus: Signal rail + Signal label, fill w=0.18 @ 85% */
  color: var(--signal);
  border-color: rgba(131, 195, 255, 0.9);
  background: linear-gradient(
    180deg,
    rgba(43, 57, 73, 0.85) 0%,
    rgba(29, 44, 61, 0.85) 100%
  );
}

.btn-glass:active {
  /* pressed: Online rail, label back to NavInk, fill w=0.24 @ 92% */
  color: var(--nav-ink);
  border-color: rgba(0, 230, 118, 0.9);
  background: linear-gradient(
    180deg,
    rgba(20, 75, 55, 0.92) 0%,
    rgba(5, 64, 42, 0.92) 100%
  );
}

/* --------------------------------------------------------------------
   Layout — hero
   -------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-6) var(--space-5);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__scanlines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    0deg,
    rgba(131, 195, 255, 0.05) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.hero__scanlines::after {
  /* panel_shimmer.gdshader: additive Signal-tinted band, ~12% band width, one pass every ~20s */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(131, 195, 255, 0.1) 50%,
    transparent 100%
  );
  height: 40%;
  animation: shimmer 20s linear infinite;
}

@keyframes shimmer {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(350%);
  }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 96px);
  margin: 0 0 var(--space-2);
  color: var(--nav-ink);
  letter-spacing: 1px;
}

.hero__pitch {
  font-family: var(--font-mono);
  font-size: clamp(14px, 2vw, 18px);
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0 0 var(--space-4);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------
   Layout — three-panel section
   -------------------------------------------------------------------- */

.section {
  padding: var(--space-7) var(--space-5);
  max-width: 1280px;
  margin: 0 auto;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.panel-grid__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--space-3);
  border: var(--rail-width) solid var(--rail);
}

.panel-grid__item h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 var(--space-2);
}

.panel-grid__item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------
   Devlog
   -------------------------------------------------------------------- */

.devlog-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
}

.devlog-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--rail-width) solid var(--rail);
}

.devlog-list li:first-child {
  border-top: var(--rail-width) solid var(--rail);
}

.devlog-list time {
  flex: 0 0 auto;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.devlog-list span {
  color: var(--nav-ink);
}

.devlog-intro {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.devlog-intro time {
  color: var(--text-dim);
  letter-spacing: 1px;
}

.devlog-group {
  margin-top: var(--space-5);
}

.devlog-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.devlog-group__head h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
}

.devlog-group__range {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.devlog-group .devlog-list {
  margin-top: var(--space-2);
}

.devlog-figures {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.devlog-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.devlog-figure {
  margin: 0;
}

.devlog-figure img {
  width: 100%;
  height: auto;
  border: var(--rail-width) solid var(--rail);
}

.devlog-figure figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.devlog-strip {
  margin-top: var(--space-3);
}

.devlog-strip__scroll {
  overflow-x: auto;
  border: var(--rail-width) solid var(--rail);
}

.devlog-strip__scroll img {
  width: auto;
  max-width: none;
  height: 220px;
  border: 0;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */

.footer {
  padding: var(--space-5);
  border-top: var(--rail-width) solid var(--rail);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.footer a {
  color: var(--text-dim);
}

.footer a:hover {
  color: var(--signal);
}

/* --------------------------------------------------------------------
   Site nav (landing + docs)
   -------------------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--rail-width) solid var(--rail);
  background: rgba(6, 11, 18, 0.92);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.site-nav__brand {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  text-decoration: none;
  color: var(--nav-ink);
}

.site-nav__links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-nav__links a,
.site-nav__ext {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
}

.site-nav__links a:hover,
.site-nav__ext:hover,
.site-nav__links a.is-active {
  color: var(--signal);
}

/* --------------------------------------------------------------------
   Hero readability scrim
   -------------------------------------------------------------------- */

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(6, 11, 18, 0.25) 0%,
    rgba(6, 11, 18, 0.55) 45%,
    rgba(6, 11, 18, 0.92) 100%
  );
  pointer-events: none;
}

.hero > .chip,
.hero > .hero__title,
.hero > .hero__pitch,
.hero > .hero__actions {
  position: relative;
  z-index: 1;
}

/* Feature cards as glass panels */
.panel-grid__item {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(14, 24, 38, 0.90) 0%,
    rgba(7, 13, 20, 0.95) 100%
  );
  border: var(--rail-width) solid var(--rail);
  padding: var(--space-3);
  transition: border-color 0.2s ease;
}

.panel-grid__item:hover {
  border-color: var(--signal);
}

.section > .chip {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------
   Docs layout + prose
   -------------------------------------------------------------------- */

.doc-body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.doc-main {
  flex: 1;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.doc-hero {
  margin-bottom: var(--space-6);
}

.doc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  margin: var(--space-3) 0 var(--space-2);
  letter-spacing: 1px;
}

.doc-hero__lede {
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}

.doc-section {
  margin-bottom: var(--space-6);
}

.doc-section__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--rail-width) solid var(--rail);
}

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-list li + li {
  margin-top: var(--space-2);
}

.doc-list a {
  display: block;
  text-decoration: none;
  padding: var(--space-3);
  background: linear-gradient(
    180deg,
    rgba(14, 24, 38, 0.75) 0%,
    rgba(7, 13, 20, 0.9) 100%
  );
  border: var(--rail-width) solid var(--rail);
  transition: border-color 0.15s ease;
}

.doc-list a:hover {
  border-color: var(--signal);
}

.doc-list__title {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--nav-ink);
  margin-bottom: 4px;
}

.doc-list__summary {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.banner {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  border: var(--rail-width) solid var(--rail);
  color: var(--text-muted);
}

.banner--warn {
  border-color: rgba(245, 154, 86, 0.55);
  color: var(--cassius);
  background: rgba(245, 154, 86, 0.06);
}

.doc-article__head {
  margin-bottom: var(--space-5);
}

.doc-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}

.doc-back:hover {
  color: var(--signal);
}

.doc-article__head h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 40px);
  margin: var(--space-3) 0 var(--space-2);
}

.doc-article__summary {
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0;
}

.prose {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nav-ink);
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h2 {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--signal);
  margin: var(--space-5) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--rail-width) solid var(--rail);
}

.prose h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--fold);
  margin: var(--space-4) 0 var(--space-2);
}

.prose p,
.prose ul,
.prose ol,
.prose table,
.prose blockquote,
.prose pre {
  margin: 0 0 var(--space-3);
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose a {
  color: var(--signal);
}

.prose a.dead-link {
  color: var(--text-dim);
  text-decoration: line-through;
  cursor: help;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(131, 195, 255, 0.08);
  padding: 0.1em 0.35em;
  border: 1px solid rgba(131, 195, 255, 0.15);
}

.prose pre {
  overflow-x: auto;
  padding: var(--space-3);
  background: rgba(6, 11, 18, 0.9);
  border: var(--rail-width) solid var(--rail);
  font-size: 13px;
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
}

.prose blockquote {
  margin-left: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--rail);
  color: var(--text-muted);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--font-mono);
}

.prose th,
.prose td {
  border: var(--rail-width) solid var(--rail);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--signal);
  background: rgba(131, 195, 255, 0.06);
}

.prose hr {
  border: none;
  border-top: var(--rail-width) solid var(--rail);
  margin: var(--space-5) 0;
}

.prose strong {
  color: #e8eef4;
}

.doc-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rail-width) solid var(--rail);
}

.doc-pager__link {
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  color: var(--signal);
  max-width: 45%;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --chamfer-panel: 8px;
  }

  .panel-grid {
    grid-template-columns: 1fr;
  }

  .site-nav {
    padding: var(--space-3);
  }

  .doc-main {
    padding: var(--space-5) var(--space-3);
  }

  .devlog-figures,
  .devlog-tiles {
    grid-template-columns: 1fr;
  }

  .devlog-strip__scroll img {
    height: 160px;
  }
}