/* ==========================================================================
   Open Ledger — sitewide visual reskin
   Loaded last on every page; overrides tokens + shared component classes
   from both existing systems (main.css "paper-and-ink" + the flagship
   inline-style pages). No selectors touch text content, structure, or
   markup — colour, type and shape only, so on-page SEO is untouched.
   Scope: recolour/retype/reshape shared components (buttons, nav, footer,
   card/badge/pill classes) via tokens + generic class-suffix selectors.
   Does NOT change each template's macro section layout (hero full-bleed
   vs. boxed, grid columns) — that would need a bespoke pass per template;
   upgrade path is a real component library if/when the site gets rebuilt.
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/PlusJakartaSans-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Manrope-variable.woff2) format('woff2');
}

:root {
  /* --- main.css "paper-and-ink" token names --- */
  --paper: #FFFFFF;
  --paper-line: #E3E8F5;
  --surface: #FFFFFF;
  --ink: #14213D;
  --navy: #14213D;
  --navy-deep: #0E1730;
  --amber: #FF6B4A;
  --amber-text: #C43D26;
  --muted: #4E5A85;
  --up: #1a7f37;
  --down: #B42318;

  /* --- flagship inline-page token names --- */
  --paper-raised: #FFFFFF;
  --ink-soft: #40507A;
  --terminal: #14213D;
  --terminal-raised: #1B2C52;
  --terminal-line: rgba(255,255,255,0.14);
  --red: #FF6B4A;
  --red-deep: #C43D26;
  --red-glow: #FF6B4A;

  /* --- "site-chrome-2026" blog wrapper token names --- */
  --sc-paper: #FFFFFF;
  --sc-ink: #14213D;
  --sc-ink-soft: #40507A;
  --sc-navy: #14213D;
  --sc-navy-deep: #0E1730;
  --sc-red: #FF6B4A;
  --sc-red-deep: #C43D26;

  /* --- shared type tokens (both systems read these) --- */
  --font-serif: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans: 'Manrope', system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4,
.hero-heading, [class*="-heading"] {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
}

a { color: #2F6FE0; }
a:hover { color: #1E4FB0; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #2F6FE0;
  outline-offset: 2px;
  box-shadow: none;
}

/* --- Buttons / CTAs --- */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.cta-button,
a.cta,
.cta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  border-radius: 999px !important;
  border-width: 1.5px;
  box-shadow: none !important;
  background-image: none !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.cta-button:hover,
a.cta:hover,
.cta:hover {
  transform: translateY(-2px);
}
.btn-primary,
.cta-button {
  background: #FF6B4A !important;
  color: #14213D !important;
  border-color: #FF6B4A !important;
}
.btn-secondary,
.btn-outline {
  background: #FFFFFF !important;
  color: #14213D !important;
  border-color: rgba(20,33,61,0.22) !important;
}

/* --- Nav --- */
.navbar, nav, .nav-menu, .navlinks {
  background: #FFFFFF;
}
.nav-link, .navlinks a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: #14213D;
}
.nav-link:hover, .nav-link.active,
.navlinks a:hover, .navlinks a.active {
  color: #2F6FE0;
}
a.nav-link.cta-button,
.nav-menu .cta-button,
.navbar .cta-button {
  color: #FFFFFF !important;
}

/* --- Eyebrows / pills / tags / badges (generic, class-suffix based) --- */
.eyebrow,
.cat-pill,
.tech-tag,
[class*="-badge"],
[class*="-pill"] {
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  background: #EAF3FF;
  color: #2F6FE0;
  border: none;
}
.trust-badge {
  background: #F5F8FF;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 14px rgba(20,33,61,0.06);
}
.footer-badge {
  border-radius: 999px;
  border: 1.5px solid #FF6B4A;
  color: #C43D26;
}

/* --- Cards (explicit real classnames + a generic net for the rest) --- */
div[class*="-card"],
article[class*="-card"],
div[class*="-item"],
.faq-item,
.credential-item,
.timeline-item,
.sidebar-card,
.svc, .svc-hero, .svc-b, .svc-c {
  border-radius: 20px;
  border: 1px solid rgba(20,33,61,0.08);
  box-shadow: none;
  background: #F5F8FF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
div[class*="-card"]:hover,
article[class*="-card"]:hover,
.sidebar-card:hover,
.svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20,33,61,0.12);
}
.svc-hero {
  background: #14213D !important;
  color: #fff;
}
.svc-hero .svc-num, .svc-hero h3, .svc-hero p { color: #fff !important; }
.svc-hero .svc-link { color: #FF6B4A !important; }

/* Safety net: guarantee legible headline colour on the two confirmed-dark
   hero sections (homepage + about). Left the generic [class*="-hero"] net
   out deliberately — the blog article-hero sits on a LIGHT background per
   its own rule, so a blanket white-text override would have broken it. */
.hero, .hero h1, .hero-sub, .about-hero, .about-hero h1, .about-hero .hero-sub {
  color: #fff;
}
.hero h1 em, .about-hero h1 em { color: #FF6B4A !important; }
.credential-item,
.timeline-item {
  border-left: none; /* remove the accent-stripe-left-border pattern */
}

/* --- Footer --- */
footer, .footer {
  background: #FFFFFF;
  border-top: 1px solid rgba(20,33,61,0.08);
}
.footer-col-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #4E5A85;
}
.footer-links a, .footer-social a {
  color: #14213D;
}
.footer-links a:hover, .footer-social a:hover {
  color: #2F6FE0;
}
.footer-tagline {
  color: #4E5A85;
}

/* --- Dark / "terminal" surfaces (process strips, dark CTA bands) --- */
[style*="--terminal"], .on-dark, .about-hero, [class*="-hero"].on-dark {
  background: #14213D;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}