/*!
 * Concept B — Site Report — Page Body Retrofit
 * Phase 5. Re-skins every existing bc-* component (Concept A "Poured Resin") to the
 * locked Concept B tokens, by overriding the exact CSS custom properties those
 * components already read from component-library.css. No component HTML changes,
 * no content changes — colour/font/radius/shadow only.
 *
 * Scoped to <main> so the header and footer (out of scope this phase, owned by a
 * later module) keep their current Concept A styling untouched. The hero (.hero-b)
 * uses its own --hb-* custom properties, not --bc-*, so it is unaffected either way.
 */
main {
  /* --- Colour: map Concept A roles onto the exact Concept B hexes from Module 02 --- */
  --bc-primary: #17181A;        /* was deep trade-blue -> Ink */
  --bc-primary-dark: #17181A;   /* was near-navy -> Ink (single dark tone, no separate deeper shade) */
  --bc-primary-light: #F1EFE9;  /* was pale blue tint -> Paper Alt */
  --bc-accent: #E2571C;         /* was poured-epoxy gold -> Hi-Vis Orange */
  --bc-accent-dark: #B8420F;    /* Accent Dark (derived, Module 02) */
  --bc-accent-text: #B8420F;    /* AA-safe darkened accent for text on paper */
  --bc-accent-on-dark: #F0855A; /* Accent Light (derived, Module 02) */
  --bc-violet: #E2571C;         /* Concept B has no secondary hue -> reuse Accent */
  --bc-violet-dark: #B8420F;

  --bc-paper: #F5F5F0;
  --bc-paper-alt: #F1EFE9;
  --bc-ink: #17181A;
  --bc-ink-soft: #6B6A63;       /* Concrete */
  --bc-line: rgba(107,106,99,0.28);   /* Concrete, low opacity, for hairlines on paper */
  --bc-line-dark: rgba(245,245,240,0.16); /* Paper, low opacity, for hairlines on dark */
  --bc-white: #F5F5F0;          /* Concept B has no pure-white surface token; Paper fills that role */

  --bc-bg: var(--bc-paper);
  --bc-bg-alt: var(--bc-paper-alt);
  --bc-text: var(--bc-ink);
  --bc-text-soft: var(--bc-ink-soft);
  --bc-border: var(--bc-line);

  /* --- Typography: Concept B pairing --- */
  --bc-font-heading: 'Oswald', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --bc-font-body: 'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- Shape: near-sharp, not pill --- */
  --bc-radius-sm: 4px;
  --bc-radius: 6px;
  --bc-radius-lg: 6px;          /* Concept B has no larger tier; cap it */
  --bc-radius-pill: 4px;        /* the key departure from Concept A's pill buttons */

  /* --- Shadow: flatter, per Module 02 --- */
  --bc-shadow-sm: 0 1px 2px rgba(23,24,26,0.08);
  --bc-shadow: 0 4px 12px rgba(23,24,26,0.12);
  --bc-shadow-lg: 0 8px 32px rgba(23,24,26,0.18);

  --bc-gradient-resin: linear-gradient(180deg, #17181A 0%, #17181A 100%);
}

/* Heading case: Concept B's H1/H4 are uppercase; H2/H3 stay sentence case (Module 02 A4).
   Existing bc-* markup reuses h2/h3 for in-body section headings, which already renders
   sentence case by default — no override needed there. Card/eyebrow labels that were
   designed as short uppercase tags in Concept A stay uppercase; that convention already
   matches Concept B's own eyebrow/label treatment, so no change needed. */

/* Buttons: Concept B CTAs read as mono "stamped" labels, uppercase, tracked out. */
main .bc-btn {
  font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

/* Blog index list — Navigation & Footer Standardisation module. */
main .bc-blog-list {
  display: grid;
  gap: var(--bc-space-6);
  max-width: 760px;
  margin-inline: auto;
}
main .bc-blog-card {
  padding-block: var(--bc-space-6);
  border-bottom: 1px solid var(--bc-border);
}
main .bc-blog-card:last-child { border-bottom: none; padding-bottom: 0; }
main .bc-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bc-space-3);
  margin-bottom: var(--bc-space-2);
  font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--bc-fs-eyebrow);
  color: var(--bc-text-soft);
}
main .bc-blog-card__category {
  color: var(--bc-white);
  background: var(--bc-accent);
  padding: 0.2em 0.7em;
  border-radius: var(--bc-radius-pill);
  text-decoration: none;
}
main .bc-blog-card__category:hover { text-decoration: none; background: var(--bc-accent-dark); }
main .bc-blog-card__date { margin: 0; }
main .bc-blog-card__title { margin-bottom: var(--bc-space-3); }
main .bc-blog-card__title a { color: var(--bc-primary-dark); text-decoration: none; }
main .bc-blog-card__title a:hover { text-decoration: underline; }
main .bc-blog-card__link {
  display: inline-block;
  margin-top: var(--bc-space-2);
  font-weight: 600;
  color: var(--bc-accent-text);
  text-decoration: none;
}
main .bc-blog-card__link:hover { text-decoration: underline; }