/*
 * forge-music base.css — typography + de-tropification rules.
 *
 * Per-instrument palette is supplied via [data-instrument="<slug>"] custom
 * properties (see forge_music.theme.emit_tokens_css). This file is the
 * NON-NEGOTIABLE stuff — anything that would let the music apps drift back
 * toward tropical-fruit-skin-pastel-emoji-rounded-corner aesthetics.
 *
 * Rules:
 *   - One serif (Cormorant Garamond) for headings and body display.
 *   - font-variant: small-caps  — never text-transform: uppercase.
 *   - Outlined difficulty pills — never pastel-fill.
 *   - border-radius: 0
 *   - No box-shadow
 *   - No emoji
 *   - One ornament motif per instrument (rendered via --instrument-ornament)
 */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --fm-base-line-height: 1.55;

  /* Sensible fallbacks the consuming app can override via instrument tokens. */
  --instrument-bg: #f5efe1;
  --instrument-fg: #2a2520;
  --instrument-accent: #7a3b2e;
  --instrument-serif: "Cormorant Garamond", serif;
  --instrument-ornament: "";
}

html, body {
  background: var(--instrument-bg);
  color: var(--instrument-fg);
  font-family: var(--instrument-serif);
  font-size: 18px;
  line-height: var(--fm-base-line-height);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--instrument-serif);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  /* explicit override — kill any UA / framework uppercase */
  text-transform: none;
}

a {
  color: var(--instrument-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Difficulty pills — outlined, never pastel-fill. */
.pill,
.difficulty-pill,
.level-pill {
  display: inline-block;
  padding: 0.1em 0.55em;
  border: 1px solid currentColor;
  background: transparent;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  border-radius: 0;
}

/* Square corners everywhere by default. Consumers may opt back in for a
   specific component, but the default is square. */
.card,
.panel,
.box,
.tab-pre,
img,
iframe,
.chord-diagram,
button,
input,
select,
textarea,
.btn {
  border-radius: 0;
  box-shadow: none;
}

/* Tab block (from the ```tab fenced shortcode). */
pre.tab,
pre.tab code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92em;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
}

/* Responsive 16:9 video wrapper for {{youtube}}. */
.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 1.2em 0;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Chord diagrams render at a small inline size; let the consuming app scale
   them per-context. The colour defaults to the instrument's foreground. */
.chord-diagram {
  display: inline-block;
  vertical-align: top;
  width: 70px;
  height: auto;
  margin: 0.4em 0.6em 0.4em 0;
  color: var(--instrument-fg);
}
.chord-diagram .chord-label { font-size: 11px; font-weight: 600; fill: currentColor; }
.chord-diagram .chord-mute { font-size: 9px; fill: currentColor; }
.chord-diagram .chord-open { fill: none; stroke: currentColor; stroke-width: 1; }
.chord-diagram .chord-nut,
.chord-diagram .chord-fret,
.chord-diagram .chord-string { stroke: currentColor; stroke-width: 0.7; }
.chord-diagram .chord-dot { fill: currentColor; }
.chord-diagram .chord-string-label { font-size: 7px; fill: currentColor; }
.chord-diagram .chord-fret-num { font-size: 7px; fill: currentColor; }
.chord-diagram .chord-stub-box { stroke: currentColor; }
.chord-diagram .chord-stub-note { fill: currentColor; }

.chord-bad {
  font-family: ui-monospace, monospace;
  color: #a33;
  border: 1px dashed #a33;
  padding: 0 0.3em;
}

/* Optional ornament hook — consumers can drop a span where they want it:
   <span class="ornament"></span> picks up the per-instrument motif. */
.ornament::before {
  content: var(--instrument-ornament);
  font-family: var(--instrument-serif);
  opacity: 0.6;
}