/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */

/* ============================================================
 * muze Brand 2026
 *
 * Loaded after built/index.css, so these overrides need no
 * rebuild. Fonts are declared via @font-face in default.hbs /
 * default-simple.hbs (assets/fonts/*.woff2).
 *
 * Accent color (#e82aa4) comes from Ghost Admin -> Design ->
 * Brand -> Accent color, not from this file.
 * ============================================================ */

:root {
  /* Fonts: Replica LL for everything, NeueBit as accent.
	 * Ghost Admin font settings (--gh-font-*) still win when set. */
  --font-family-headings: var(--gh-font-heading, "Replica LL", sans-serif);
  --font-family-body: var(--gh-font-body, "Replica LL", sans-serif);
  --font-family-button: var(--gh-font-body, "Replica LL", sans-serif);
  --font-family-accent: "NeueBit", "Replica LL", sans-serif;

  /* Brand geometry: buttons/pills 5px, cards ~8px. */
  --radius-1: 5px;
  --radius-2: 8px;
  --radius-3: 8px;
  --radius-4: 8px;
  --radius-5: 8px;
  --radius-6: 8px;

  /* Buttons: 5px radius, bold label, Ink hover (Off-white text). */
  --button--border-radius: 5px;
  --button--font-weight: var(--font-weight-bold);
  --button-hover--color: #fdfafb;
  --button-hover--background-color: #211b25;
  --button-hover--opacity: 1;
}

/* Dark mode: inverted hover (Off-white surface, Ink text). */
:root[data-color-scheme="dark"] {
  --button-hover--color: #211b25;
  --button-hover--background-color: #fdfafb;
}

@media (prefers-color-scheme: dark) {
  :root[data-color-scheme="system"] {
    --button-hover--color: #211b25;
    --button-hover--background-color: #fdfafb;
  }
}

/* Replica LL body tracking per brand book (-2%). */
body {
  letter-spacing: -0.02em;
}

/* NeueBit accent on small labels: category tag + reading time. */
.card-post-primary-tag,
.card-post-time {
  font-family: var(--font-family-accent);
}

/* Icon and "rounded" buttons follow the 5px brand radius
 * (both have hardcoded radii in the built CSS). */
.button-icon,
.button-rounded {
  border-radius: 5px;
}

/* Inputs match the button geometry (built CSS uses 1.5rem pills). */
form .kg-signup-card-input,
input,
select,
textarea {
  border-radius: 5px;
}

/* Ghost CTA cards in post content: card 8px, inner media 5px. */
.post-content .kg-cta-card {
  border-radius: 8px;
}

.post-content .kg-cta-image-container img {
  border-radius: 5px;
}