/* ==========================================================================
   Bcom theme — single source of truth for design tokens.

   Loaded AFTER each page's inline <style>, so it governs. Page CSS keeps
   layout; this file owns colour, type and the logo lockup. Change a token
   here and all nine pages follow.

   TYPE: FF DIN is commercial (Monotype). The stack prefers a licensed local
   copy if installed, then D-DIN (open SIL OFL DIN derivative) if self-hosted,
   then Barlow — a DIN-adjacent grotesque on Google Fonts — as the webfont
   everyone actually gets. Drop licensed .woff2 files into /fonts and add an
   @font-face block to upgrade every visitor.

   COLOUR: every foreground/background pair below meets WCAG AA (worst pair
   5.93:1). The previous palette failed: --muted was 2.91:1 on cards.
   ========================================================================== */

:root {
  /* Surfaces — lifted off pure black, with real separation between layers */
  --black:       #14181d;   /* page background            */
  --near-black:  #1a1f25;   /* alternating section        */
  --dark:        #1a1f25;   /* alternating section        */
  --mid:         #1f242b;   /* raised band                */
  --surface:     #262d35;   /* cards, panels              */
  --border:      #38414c;   /* visible, not guesswork     */

  /* Text — all AA or better on every surface above */
  --white:       #f7f9fb;   /* headings          13.2–16.9:1 */
  --light:       #ccd6df;   /* body               9.4–12.1:1 */
  --muted:       #9dabb8;   /* meta, captions     5.9–7.6:1  */

  /* Accent */
  --blue:        #6bb0e3;   /* 5.9–7.6:1 — was 4.43:1 on cards */
  --blue-light:  #93c8ee;
  --blue-dark:   #2d6a9a;
  --blue-glow:   rgba(107,176,227,0.14);

  --sans: 'FF DIN','DIN Next LT Pro','DIN Next','D-DIN','Barlow',
          -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── Base typography ─────────────────────────────────────────────────────
   DIN runs slightly smaller on the body than Inter at the same px, so the
   base size goes up. The old 16px/13px pairing was the other half of the
   readability problem — contrast alone would not have fixed it.            */

body {
  font-family: var(--sans);
  background: var(--black);
  color: var(--light);
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0.005em;
}

h1, h2, h3, h4, .section-title, .hero h1 {
  font-family: var(--sans);
  color: var(--white);
  letter-spacing: -0.015em;
}

p { color: var(--light); }
strong, b { color: var(--white); font-weight: 600; }

.hero-sub      { font-size: 19px; line-height: 1.7;  color: var(--light); }
.section-lead  { font-size: 17px; line-height: 1.75; color: var(--light); }

/* Small text was the worst offender — 13px at 3.4:1. Now 15px at 9.4:1. */
.why-card p, .op-card p, .principle p, .ver p { font-size: 15px; line-height: 1.7; }
.why-card h3, .op-card h3 { font-size: 16px; color: var(--white); }
table.std { font-size: 15px; }
table.std th { color: var(--muted); font-size: 12px; }
table.std td { color: var(--light); }
.hero-meta, footer p { font-size: 13px; color: var(--muted); }
.section-tag, .hero-tag { color: var(--blue); font-size: 12px; }

/* Links inside prose need to be visibly links, not just coloured text */
a.inline, .section-inner p > a, table.std a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a.inline:hover, .section-inner p > a:hover { color: var(--blue-light); }

/* ── Logo lockup ─────────────────────────────────────────────────────────
   Mark + wordmark, not a bare text wordmark. The mark is the bowtie from the
   original logo; currentColor lets it sit on any surface.                   */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.nav-logo .nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
  transition: opacity .2s;
}
.nav-logo:hover .nav-logo-img { opacity: .82; }

/* Retained for any surface still using the text lockup */
.nav-logo .wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.015em;
  color: var(--white);
  line-height: 1;
}

footer .footer-logo .wordmark { font-family: var(--sans); font-weight: 700; }

/* ── Related reading ─────────────────────────────────────────────────────
   Every guide links to its siblings. Internal links spread authority: before
   this, each guide had one real inbound link and /framework had none at all. */

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.related-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
}
.related-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.related-card h3 a { color: var(--blue-light); text-decoration: none; }
.related-card h3 a:hover { text-decoration: underline; }
.related-card p { font-size: 14px; color: var(--light); line-height: 1.65; }

/* ── Components inheriting the new tokens ────────────────────────────────
   Page CSS sets these too; these rules win because this file loads last.   */

nav { background: var(--near-black); border-bottom: 1px solid var(--border); }
.why-card, .op-card, .principle, details.bone {
  background: var(--surface);
  border-color: var(--border);
}
.btn-primary { background: var(--blue); color: #0d1116; font-weight: 600; }
.btn-primary:hover { background: var(--blue-light); }
.btn-outline { border: 1px solid var(--border); color: var(--white); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-light); }

section:nth-of-type(even) { background: var(--near-black); }
section:nth-of-type(odd)  { background: var(--black); }
.hero { background: var(--near-black); border-bottom: 1px solid var(--border); }
.cta-section { background: var(--mid); border-top: 1px solid var(--border); }
footer { background: var(--black); border-top: 1px solid var(--border); }

/* Focus visibility — was inheriting the browser default on a dark ground */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-sub { font-size: 17px; }
  .nav-logo .nav-logo-img { height: 28px; }
  .nav-logo .wordmark { font-size: 22px; }
}