@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* ============================================================
   FORESHOCK — blog brand layer
   Loaded after the Simple Blog theme's styles.css, this remaps the
   @lumeland/ds design tokens onto the Foreshock design system
   (see ../../public/assets/foreshock.css) so the blog reads as part
   of the product site: dark instrument panel, Space Grotesk + IBM
   Plex Mono, signal-blue accent.
   ============================================================ */
/* ---- typography (both themes) ---- */
:root {
  --font-family-ui: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --font-family-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --font-family-code: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display-spacing: -0.03em;
  --font-title-spacing: -0.02em;
  --font-body-spacing: 0;
  --border-radius: 6px;

  --color-primary: #1aa3e8;
  --color-primary-highlight: #5abdee;
}
/* ---- Foreshock dark palette (primary look) ---- */
[data-theme="dark"] {
  --color-base: #eef3f6; /* headings / strongest text */
  --color-text: #c4ced3; /* body copy */
  --color-dim: #8b97a0; /* meta, muted */
  --color-line: rgba(233, 240, 244, 0.12);
  --color-background: #0a0d10;
  --color-highlight: #151c22;

  --color-primary: #1aa3e8;
  --color-primary-highlight: #5abdee;

  /* prism / code */
  --code-text: #e9eef1;
  --code-comment: #5d6970;
  --code-token-1: #5abdee; /* keywords */
  --code-token-2: #19d0e3; /* strings — trace cyan */
  --code-token-3: #97a3aa; /* punctuation / dim */
  --code-token-4: #6fcf97; /* inserted / numbers */
  --code-border: rgba(233, 240, 244, 0.10);
  --code-background: #0c1014;
  --code-background-selection: rgba(26, 163, 232, 0.18);

  --fs-grid: rgba(233, 240, 244, 0.035);

  --pagefind-ui-primary: var(--color-primary);
  --pagefind-ui-text: var(--color-text);
  --pagefind-ui-background: var(--color-highlight);
  --pagefind-ui-border: var(--color-line);
  --pagefind-ui-tag: #1a232a;
}
/* Keep a tasteful light variant on-brand if a reader toggles it. */
:root {
  --pagefind-ui-primary: var(--color-primary);
}
::selection {
  background: rgba(26, 163, 232, 0.28);
}
/* ---- faint instrument grid, echoing the marketing site ---- */
[data-theme="dark"] body {
  background-color: var(--color-background);
  background-image:
    linear-gradient(var(--fs-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-attachment: fixed;
}
/* ---- navbar: mono instrument labels, like the product nav ---- */
.navbar {
  border-bottom: 1px solid var(--color-line);
  padding-block: 1.4rem;
}
.navbar-links {
  font: 500 0.82rem/1 var(--font-family-code);
  letter-spacing: 0.03em;
  column-gap: 1.5rem;
}
.navbar-links a {
  color: var(--color-dim);
  text-decoration: none;
  transition: color 0.16s ease;
}
.navbar-links a:hover {
  color: var(--color-base);
}
.navbar-links a[aria-current="page"] {
  color: var(--color-primary);
}
.fs-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fs-logo svg {
  display: block;
}
.fs-logo strong {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--color-base);
}
.fs-logo__sub {
  color: var(--color-dim);
  font-weight: 500;
}
.navbar .button {
  color: var(--color-dim);
  border: 1px solid var(--color-line);
  border-radius: var(--border-radius);
}
.navbar .button:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
/* ---- prose links get the accent; titles stay near-white ---- */
.body a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 163, 232, 0.35);
}
.body a:hover {
  color: var(--color-primary-highlight);
  border-bottom-color: var(--color-primary-highlight);
}
/* ---- tags / badges: mono chips like the product site ---- */
.badge {
  font: 500 0.68rem/1 var(--font-family-code);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dim);
  border: 1px solid var(--color-line);
  border-radius: 100px;
  padding: 0.4em 0.75em;
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.badge:hover {
  color: var(--color-primary);
  border-color: rgba(26, 163, 232, 0.4);
}
/* ---- post meta ---- */
.post-details {
  font-family: var(--font-family-code);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.post-link {
  font: 500 0.8rem/1 var(--font-family-code);
  color: var(--color-primary);
  text-decoration: none;
}
.post-link:hover {
  color: var(--color-primary-highlight);
}
/* ---- footer ---- */
.fs-footer {
  border-top: 1px solid var(--color-line);
  margin-top: var(--row-gap-medium);
  padding: 2rem min(5vw, 5rem);
}
.fs-footer__inner {
  max-width: min(100% - 15vw, 45em);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font: 400 0.76rem/1.4 var(--font-family-code);
  color: var(--color-dim);
  letter-spacing: 0.02em;
}
.fs-footer a {
  color: var(--color-dim);
}
.fs-footer a:hover {
  color: var(--color-primary);
}