/**
 * Uníssono — tipografia unificada (UI + landings).
 * Escala: 12px badges · 14px meta/UI · 16px corpo/inputs · fluido em heroes.
 */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', Courier, monospace;
  --cifra-mono-font: var(--font-mono);

  /* Escala tipográfica (Major Third aproximado) */
  --text-xs: 0.75rem;    /* 12px — badges, timestamps decorativos */
  --text-sm: 0.875rem;   /* 14px — meta, nav, captions essenciais */
  --text-base: 1rem;     /* 16px — corpo, inputs, CTA */
  --text-md: 1.0625rem;  /* 17px — lead paragraphs */
  --text-lg: 1.25rem;    /* 20px — H3 / títulos de card */
  --text-xl: clamp(1.375rem, 2.5vw + 0.5rem, 1.75rem);
  --text-2xl: clamp(1.75rem, 4vw + 0.75rem, 2.75rem);
  --text-3xl: clamp(2rem, 5vw + 1rem, 3.25rem);

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

html {
  font-size: 100%;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: clamp(var(--text-base), 0.95rem + 0.25vw, var(--text-md));
  line-height: var(--leading-relaxed);
}

body,
.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.modal-content,
.navbar,
.nav-link,
.breadcrumb,
.pagination,
.alert,
.card,
.list-group-item,
table,
input,
textarea,
select,
button {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
}

pre,
code,
kbd,
samp,
.font-mono,
.cifra-mono {
  font-family: var(--font-mono);
}

.cifra-body,
.cifra-sheet,
.setlist-print-body,
.grade-visual-root,
.leadsheet-systems,
#conteudo,
.cifra-editor {
  font-family: var(--font-mono);
}

.ui-label,
.staff-part-label,
.grade-secao {
  font-family: var(--font-sans);
}

/* Bootstrap: legibilidade mínima */
small,
.small {
  font-size: var(--text-sm) !important;
}

.form-control,
.form-select,
textarea.form-control,
input.form-control {
  font-size: var(--text-base);
}

.form-label {
  font-size: var(--text-sm);
}

.btn-lg {
  font-size: var(--text-base);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Rótulos de seção (uppercase) */
.text-section-label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
}