/*
 * Marcel Mellor skin — purple + ABC Favorit (default).
 *
 * Layout/templates live in `base.css`. This file only provides:
 *   - ABC Favorit @font-face
 *   - Brand colors (--mm-purple etc.)
 *   - Theme-hook overrides (consumed by base.css)
 *   - A few Marcel-specific weight tweaks
 */

@font-face {
  font-family: "ABC Favorit";
  src: url("../assets/fonts/ABCFavorit-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Favorit";
  src: url("../assets/fonts/ABCFavorit-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.skin-marcelmellor {
  /* Brand palette */
  --mm-purple: #2f0d5b;
  --mm-orange: #ffa800;
  --mm-orange-soft: #e8ac68;
  --mm-gray: #2c3333;
  --mm-white: #ffffff;

  /* Theme hooks (consumed by base.css) */
  --mm-bg: var(--mm-purple);
  --mm-section-bg: var(--mm-white);
  --mm-fg: var(--mm-purple);
  --mm-fg-on-dark: var(--mm-white);
  --mm-accent: var(--mm-orange);
  --mm-accent-soft: var(--mm-orange-soft);
  --mm-on-kicker: var(--mm-purple);
  --mm-link: var(--mm-purple);
  --mm-divider-bg: var(--mm-purple);
  --mm-font-body: "ABC Favorit", sans-serif;
  --mm-font-display: "ABC Favorit", sans-serif;
  --mm-h1-weight: 500;
  --mm-h2-weight: 500;
}

/* Marcel-specific: title h1 is lighter than other headings */
.skin-marcelmellor .mm-title h1 {
  font-weight: 400;
}

/* Highlight bar behind emphasized words in headlines (brand element):
   **fett** inside a headline gets the soft-accent marker bar painted behind
   the glyphs — the Filzstift look from the SVG/web brand. Band ≈ 20% of the
   font size, sitting just below the baseline so it overlaps the letters
   slightly. Weight stays equal to the headline; box-decoration-break keeps the
   bar intact across line wraps. Scoped to this skin — sipgate/12signals have
   their own bold-in-headline conventions. The headline element is an <h*> in
   most templates but a <p class="mm-text"> in big-text/quote/icon templates. */
.skin-marcelmellor .reveal h1 strong,
.skin-marcelmellor .reveal h2 strong,
.skin-marcelmellor .reveal h3 strong,
.skin-marcelmellor .reveal .mm-text strong {
  font-weight: inherit;
  background-image: linear-gradient(
    to top,
    transparent 0.21em,
    var(--mm-orange-soft) 0.21em,
    var(--mm-orange-soft) 0.41em,
    transparent 0.41em
  );
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}