:root {
  --bg-0: #0b0f14;
  --bg-1: #111723;
  --panel-bg-start: rgba(226,235,218,.95);
  --panel-bg-end:   rgba(212,224,205,.93);
  --border: rgba(255,255,255,0.08);
  --text: #d7e3ff;
  --muted: #9fb2d9;
  --accent: #7dc4ff;
  --accent-soft: rgba(125,196,255,0.18);

  /* Light panel ink colors */
  --ink:       #18222c;
  --ink-muted: #3d4f5c;
  --stroke:    rgba(80,110,130,0.22);
  --stroke2:   rgba(80,110,130,0.14);

  /* Shared tokens */
  --radius: 14px;
  --shadow: 0 4px 28px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.18);
}

/* ── Body background ── */
body {
  background:
    radial-gradient(1200px 800px at 20% 0%, #121a2a 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 10%, #0f1726 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  color: var(--text);
}

/* ── Animated background layer ── */
.site-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/background2.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.25;
  filter: saturate(0.9) contrast(1.05);
}
.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.15;
}

/* ── Vignette ── */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ── Global link color (outside panels) ── */
a             { color: var(--accent); }
a:hover       { text-shadow: 0 0 6px var(--accent-soft); }

hr { border: none; border-top: 1px solid var(--border); }

/* ── Topbar / footer sit above bg ── */
header, main, footer { position: relative; z-index: 1; }