/* ==========================================================================
   dark-shell — graphite theme for service landings, aligned 1:1 with the main
   site (home v4). Extracted from cms-development.css. Load AFTER tokens.css /
   shell.css and ONLY on pages that opt into the dark look: the selectors are
   generic, inclusion of this file is what scopes the theme.
   Fonts expected (add to headExtra): Space Grotesk, IBM Plex Sans, IBM Plex Mono.
   ========================================================================== */

body.service-page {
  --lc-bg: #0a0b0e;
  --lc-surface-2: #14161c;
  --lc-surface-3: #0d0f14;
  --lc-card: #14161c;
  --lc-ink: #f1efea;
  --lc-ink-soft: #8b95a4;
  --lc-ink-soft-2: #8b95a4;
  --lc-line: #232733;
  --lc-accent: #ff5e2e;
  --lc-accent-deep: #ff5e2e;
  --lc-accent-tint: #ff8b66;
  --lc-on-accent: #0a0b0e;
  --lc-shadow-soft: none;
  --lc-shadow-lift: 0 14px 34px rgba(0, 0, 0, .45);

  --lc-font-display: 'Space Grotesk', 'Manrope', 'Segoe UI', sans-serif;
  --lc-font-text: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --lc-font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* extra dark tokens shared by page-specific stylesheets */
  --lc-panel: #14161c;
  --lc-panel2: #181b22;
  --lc-line2: #333947;
  --lc-teal: #38e1c0;

  background: var(--lc-bg);
  color: var(--lc-ink);
}

/* the shared shell paints a cream gradient + multiply grain — retune for dark */
body.service-page::before {
  opacity: .05;
  mix-blend-mode: screen;
}
body.service-page ::selection {
  background: var(--lc-accent);
  color: #0a0b0e;
}
body.service-page .site-header {
  background: rgba(10, 11, 14, .82);
  border-bottom-color: var(--lc-line);
}
body.service-page .lang {
  background: rgba(24, 27, 34, .7);
  border-color: var(--lc-line2);
}
body.service-page .lang a.is-active {
  background: var(--lc-accent);
  color: #0a0b0e;
}
body.service-page .btn--primary,
body.service-page .nav-drawer a.btn {
  background: var(--lc-accent);
  color: #0a0b0e;
}
body.service-page .btn--primary:hover {
  background: #ff7a52;
  color: #0a0b0e;
}
body.service-page .btn--ghost { color: var(--lc-ink) }
body.service-page .nav-toggle {
  background: var(--lc-panel);
  border-color: var(--lc-line2);
}
body.service-page .nav-drawer { background: var(--lc-bg) }
body.service-page.nav-open .nav-drawer {
  background: linear-gradient(180deg, #0f1116 0%, #0a0b0e 100%);
}
body.service-page .site-footer { background: var(--lc-surface-3) }
body.service-page .skip-link { color: #0a0b0e }