package main

// magazineBoldUtilityCSS is appended into the host Tailwind input. It carries
// the editorial display-type utilities, font-slot classes, the hairline rule
// motif, the asymmetric grid utilities, and the per-accent pull-quote variants.
//
// All font-family references go through CSS variables per docs/FONTS.md.
// All color references go through `hsl(var(--token))` consumers of the 19
// theme tokens — no hardcoded hex, rgb(), or named colors. Per-accent
// pull-quote variants intentionally key off the `--accent` token (which the
// active preset rotates between hot pink, electric blue and lime).
//
// The `data-mb-accent` attribute selectors let a pull-quote pin a specific
// accent independently of the preset — they map back into the theme token
// space using the HSL triples documented in the spec §4 accent rows.
const magazineBoldUtilityCSS = `
/* ===========================================================
 * Magazine Bold — theme utilities
 * Appended to the Tailwind input via CSSManifest.InputCSSAppend.
 * =========================================================== */

/* --- Font-slot classes (consume CMS-managed font variables) --- */
.font-display {
  font-family: var(--font-heading, "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif);
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  font-optical-sizing: auto;
}
.font-serif-sub {
  font-family: var(--font-heading, "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif);
}
.font-sans {
  font-family: var(--font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}
.font-mono {
  font-family: var(--font-mono, "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

/* --- Display-size utilities ------------------------------- */
/* text-folio: 220pt-equivalent oversized folio number / cover hit.
   The clamp resolves to ~220px (~165pt) at 1440px, scaling down to 80px on mobile. */
.text-folio {
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: clamp(80px, 18vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 200;
  font-style: italic;
}
.text-deck {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.text-kicker {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

/* --- Hairline rule motif ---------------------------------- */
.mb-hairline { border-color: hsl(var(--border)); border-width: 1px; }
.mb-hairline-top { border-top: 1px solid hsl(var(--border)); }
.mb-hairline-bottom { border-bottom: 1px solid hsl(var(--border)); }

/* --- Asymmetric editorial grid ---------------------------- */
.mb-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}
.mb-grid-asym-cover {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  align-items: end;
}
.mb-col-folio { grid-column: 1 / span 2; }
.mb-col-headline { grid-column: 3 / span 7; }
.mb-col-deck { grid-column: 10 / span 3; }
.mb-col-image-wide { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .mb-grid-asym-cover { grid-template-columns: 1fr; gap: 1.25rem; }
  .mb-col-folio, .mb-col-headline, .mb-col-deck { grid-column: 1 / -1; }
}

/* --- Photo essay frame spans ------------------------------ */
.mb-photo-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}
.mb-frame-half { grid-column: span 6 / span 6; }
.mb-frame-full { grid-column: 1 / -1; }
.mb-frame-tall { grid-column: span 5 / span 5; grid-row: span 2; }

@media (max-width: 768px) {
  .mb-photo-grid { grid-template-columns: 1fr; }
  .mb-frame-half, .mb-frame-full, .mb-frame-tall { grid-column: 1 / -1; grid-row: auto; }
}

/* --- Color-block accent panels ---------------------------- */
.colorblock-accent {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* --- Per-accent pull-quote variants ----------------------- *
 * These let a pull_quote override the preset accent on a per-instance basis.
 * They use literal HSL triples that match the spec §4 accent values so a
 * "pink" pull-quote always reads pink even on the ink-blue preset.
 */
[data-mb-accent="pink"] { --mb-accent-h: 330; --mb-accent-s: 95%; --mb-accent-l: 58%; }
[data-mb-accent="blue"] { --mb-accent-h: 220; --mb-accent-s: 100%; --mb-accent-l: 56%; }
[data-mb-accent="lime"] { --mb-accent-h: 78; --mb-accent-s: 90%; --mb-accent-l: 50%; }
[data-mb-accent] .mb-quote-bar {
  background-color: hsl(var(--mb-accent-h) var(--mb-accent-s) var(--mb-accent-l));
}
[data-mb-accent] .mb-quote-text { color: hsl(var(--foreground)); }

/* --- Drop-cap (heading override) -------------------------- */
.mb-dropcap::first-letter {
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 200;
  float: left;
  font-size: 5.5em;
  line-height: 0.85;
  padding-right: 0.08em;
  margin-top: 0.04em;
  color: hsl(var(--foreground));
}

/* --- Body text override (Inter + margin folios) ----------- */
.mb-body {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: hsl(var(--foreground));
}

/* --- Squared ink button ----------------------------------- */
.mb-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.875rem 1.5rem;
  border: 1px solid hsl(var(--primary));
  border-radius: 0;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mb-button:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}
.mb-button:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* --- Caption (mono, used by image override + photo essay) -- */
.mb-caption {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: hsl(var(--muted-foreground));
}

/* --- Full-bleed image with numbered folio ----------------- */
.mb-fullbleed { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.mb-image-folio {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
}
`