/* Factory Template B - Editorial Calm */
/* Tokens are template primitives; client skin overrides belong in a separate layer. */
:root {
  --fc-b-color-paper: #F7F6F2;
  --fc-b-color-paper-white: #FFFFFF;
  --fc-b-color-paper-wash: #EEEDE8;
  --fc-b-color-ink: #1A1A18;
  --fc-b-color-ink-muted: #6D6B64;
  --fc-b-color-ink-subtle: #97948B;
  --fc-b-color-line: #D8D5CD;
  --fc-b-color-accent-rule: #9A7563;
  --fc-b-color-focus: #526C73;
  --fc-b-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --fc-b-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fc-b-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fc-b-weight-display: 400;
  --fc-b-weight-body: 400;
  --fc-b-weight-label: 600;
  --fc-b-tracking-display: -0.02em;
  --fc-b-tracking-label: 0.08em;
  --fc-b-space-section: clamp(3rem, 8vw, 7rem);
  --fc-b-space-content: clamp(1.25rem, 3vw, 3rem);
  --fc-b-space-stack: 1.25rem;
  --fc-b-space-tight: 0.5rem;
  --fc-b-radius-sm: 0.25rem;
  --fc-b-radius-md: 0.75rem;
  --fc-b-radius-lg: 1rem;
  --fc-b-rule-width: 1px;

  /* Semantic aliases */
  --fc-b-page-background: var(--fc-b-color-paper);
  --fc-b-surface: var(--fc-b-color-paper-white);
  --fc-b-surface-wash: var(--fc-b-color-paper-wash);
  --fc-b-text: var(--fc-b-color-ink);
  --fc-b-text-muted: var(--fc-b-color-ink-muted);
  --fc-b-text-subtle: var(--fc-b-color-ink-subtle);
  --fc-b-border: var(--fc-b-color-line);
  --fc-b-rule: var(--fc-b-color-accent-rule);
  --fc-b-focus-ring: var(--fc-b-color-focus);
}

/* Recommended rule treatment: quiet, thin, and never a loud fill. */
.fc-b-rule {
  border: 0;
  border-top: var(--fc-b-rule-width) solid var(--fc-b-rule);
}

.fc-b-display {
  font-family: var(--fc-b-font-display);
  font-weight: var(--fc-b-weight-display);
  letter-spacing: var(--fc-b-tracking-display);
}

.fc-b-body {
  font-family: var(--fc-b-font-body);
}

:where(.fc-b-focusable):focus-visible {
  outline: 2px solid var(--fc-b-focus-ring);
  outline-offset: 3px;
}

/* --- Chrome / fixture bridge (Web Designer) --- */
/* Source of truth above: Design Ops handoff template-b-editorial-calm */
.template--B {
  --bg: var(--fc-b-page-background);
  --surface: var(--fc-b-surface);
  --surface-2: var(--fc-b-surface-wash);
  --text: var(--fc-b-text);
  --text-2: var(--fc-b-text-muted);
  --text-muted: var(--fc-b-text-subtle);
  --line: var(--fc-b-border);
  --accent: var(--client-accent, var(--fc-b-rule));
  --accent-hover: var(--client-accent-hover, var(--fc-b-color-accent-rule));
  --on-accent: var(--client-on-accent, var(--fc-b-surface));
  --focus: var(--fc-b-focus-ring);
  --font-display: var(--fc-b-font-display);
  --font-sans: var(--fc-b-font-body);
  --font-mono: var(--fc-b-font-mono);
  --section-gap: var(--fc-b-space-section);
  --radius-card: var(--fc-b-radius-lg);

  font-family: var(--fc-b-font-body);
  background: var(--fc-b-page-background);
  color: var(--fc-b-text);
}

.template--B h1,
.template--B h2,
.template--B h3,
.template--B .hero__title,
.template--B .section__title {
  font-family: var(--fc-b-font-display);
  font-weight: var(--fc-b-weight-display);
  letter-spacing: var(--fc-b-tracking-display);
}

.template--B .hero--paper {
  background: linear-gradient(165deg, var(--fc-b-color-paper) 0%, var(--fc-b-color-paper-wash) 48%, var(--fc-b-color-paper) 100%);
  border-bottom: var(--fc-b-rule-width) solid var(--fc-b-border);
  padding: clamp(48px, 8vw, 80px) 16px;
}

.template--B .hero__rule {
  width: 48px;
  height: var(--fc-b-rule-width);
  margin: 16px 0;
  border: 0;
  background: var(--fc-b-rule);
}

.template--B .card,
.template--B .nap-card,
.template--B .cat-tile {
  background: var(--fc-b-surface);
  border: var(--fc-b-rule-width) solid var(--fc-b-border);
  border-radius: var(--fc-b-radius-lg);
  box-shadow: none;
}

.template--B .btn--primary {
  background: transparent;
  color: var(--fc-b-text);
  border: 2px solid var(--fc-b-text);
}

.template--B .btn--primary:hover {
  background: var(--fc-b-text);
  color: var(--fc-b-surface);
}

.template--B .btn--outline,
.template--B .btn--secondary {
  background: transparent;
  color: var(--fc-b-rule);
  border: 1px solid var(--fc-b-rule);
}

.template--B a:not(.btn) {
  color: var(--fc-b-rule);
  text-underline-offset: 2px;
}

.template--B .nf-credit {
  text-align: center;
  padding: 24px 16px 96px;
  font-size: 12px;
  color: var(--fc-b-text-subtle);
  border-top: var(--fc-b-rule-width) solid var(--fc-b-border);
  background: var(--fc-b-page-background);
}