/*
 * Compasso — CifraClub Design System
 * Tokens flattened from src/styles/abstracts/.
 *
 * Camadas:
 *   1) Global  — escalas brutas (`--g-<color>-solid-<step>`).
 *   2) Semantic — tokens de uso (`--base-*`, `--status-*`, `--state-*`,
 *      `--decorative-*`, `--overlay-*`, `--shadows-*`).
 *
 * Componentes consomem APENAS a camada semantic (regra do CLAUDE.md).
 * `dynamic` muda no `[data-theme="dark"]`; `fixed` não muda.
 */

/* =====================================================================
 *  WEBFONTS — Lexend Deca (custom), Roboto (system), Roboto Mono (mono)
 *  Carregados via Google Fonts; troque por arquivos em fonts/ se quiser
 *  servir local-self-hosted.
 * ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");

/* =====================================================================
 *  GLOBAL SCALES
 * ===================================================================== */
:root {
  /* Neutral ramp (0 = #000, 100 = #fff). */
  --g-neutral-0:   #000;
  --g-neutral-10:  #1b1b1b;
  --g-neutral-13:  #222222;
  --g-neutral-15:  #262626;
  --g-neutral-20:  #303030;
  --g-neutral-30:  #474747;
  --g-neutral-40:  #5e5e5e;
  --g-neutral-50:  #777777;
  --g-neutral-60:  #919191;
  --g-neutral-70:  #ababab;
  --g-neutral-80:  #c6c6c6;
  --g-neutral-90:  #e2e2e2;
  --g-neutral-95:  #f1f1f1;
  --g-neutral-98:  #f5f5f5;
  --g-neutral-100: #ffffff;

  /* Decorative ramps (CifraClub orange is the brand). */
  --g-orange-95: #ffe8dc;
  --g-orange-90: #ffd0ba;
  --g-orange-80: #ff9e73;
  --g-orange-75: #ff8822;
  --g-orange-70: #ff6600;
  --g-orange-68: #ee6600;
  --g-orange-60: #d65400;
  --g-orange-50: #a13d00;
  --g-orange-30: #4c1900;
  --g-orange-20: #2c0b00;
  --g-orange-15: #180400;

  --g-teal-95: #cbe3d9;
  --g-teal-90: #badacc;
  --g-teal-80: #96c8b4;
  --g-teal-70: #5eac90;
  --g-teal-60: #00916e;
  --g-teal-50: #017155;
  --g-teal-30: #003526;
  --g-teal-20: #001a11;
  --g-teal-15: #000e08;

  --g-blue-95: #d0e8ff;
  --g-blue-90: #c1e0ff;
  --g-blue-80: #81bfff;
  --g-blue-70: #359bff;
  --g-blue-60: #2b81eb;
  --g-blue-50: #1d60b1;
  --g-blue-30: #092b54;
  --g-blue-20: #031631;

  --g-red-95: #ffd7d5;
  --g-red-90: #ffcac7;
  --g-red-80: #ffa19e;
  --g-red-70: #fb5259;
  --g-red-60: #df484f;
  --g-red-50: #9f3235;
  --g-red-40: #cc3300;
  --g-red-30: #4a1215;
  --g-red-20: #2b0708;

  --g-purple-95: #efddff;
  --g-purple-90: #ead2ff;
  --g-purple-80: #d5a4ff;
  --g-purple-60: #a15fd4;
  --g-purple-50: #78459f;
  --g-purple-30: #371d4b;
  --g-purple-20: #1e0d2b;

  --g-rose-95: #ffe5ed;
  --g-rose-90: #ffccdc;
  --g-rose-80: #ff96b9;
  --g-rose-60: #d3497e;
  --g-rose-50: #9f355e;
  --g-rose-30: #4b142a;
  --g-rose-20: #2b0816;

  --g-yellow-95: #f4eccf;
  --g-yellow-90: #ecdda9;
  --g-yellow-80: #d9b83d;
  --g-yellow-70: #c89600;
  --g-yellow-60: #ab8000;
  --g-yellow-50: #805f00;
  --g-yellow-30: #3a2900;
  --g-yellow-20: #231700;
  --g-yellow-15: #130b00;

  --g-amber-60: #ffa33b;
  --g-green-40: #14b866;
  --g-citron-36: #c2c800;
  --g-citron-39: #b7b700;

  /* =================================================================
   * SEMANTIC — base (neutral foreground/background/border)
   * ================================================================= */
  --base-neutral-foreground-dynamic-10: var(--g-neutral-10);
  --base-neutral-foreground-dynamic-40: var(--g-neutral-40);
  --base-neutral-foreground-dynamic-50: var(--g-neutral-50);
  --base-neutral-foreground-dynamic-70: var(--g-neutral-70);
  --base-neutral-foreground-dynamic-100: var(--g-neutral-100);

  --base-neutral-foreground-fixed-10:  var(--g-neutral-10);
  --base-neutral-foreground-fixed-40:  var(--g-neutral-40);
  --base-neutral-foreground-fixed-70:  var(--g-neutral-70);
  --base-neutral-foreground-fixed-80:  var(--g-neutral-80);
  --base-neutral-foreground-fixed-100: var(--g-neutral-100);

  --base-neutral-background-dynamic-0:   var(--g-neutral-0);
  --base-neutral-background-dynamic-10:  var(--g-neutral-10);
  --base-neutral-background-dynamic-15:  var(--g-neutral-15);
  --base-neutral-background-dynamic-20:  var(--g-neutral-20);
  --base-neutral-background-dynamic-30:  var(--g-neutral-30);
  --base-neutral-background-dynamic-40:  var(--g-neutral-40);
  --base-neutral-background-dynamic-50:  var(--g-neutral-50);
  --base-neutral-background-dynamic-60:  var(--g-neutral-60);
  --base-neutral-background-dynamic-70:  var(--g-neutral-70);
  --base-neutral-background-dynamic-80:  var(--g-neutral-80);
  --base-neutral-background-dynamic-90:  var(--g-neutral-90);
  --base-neutral-background-dynamic-95:  var(--g-neutral-95);
  --base-neutral-background-dynamic-100: var(--g-neutral-100);

  --base-neutral-elevation-dynamic-under: var(--g-neutral-98);
  --base-neutral-elevation-dynamic-over:  var(--g-neutral-100);

  --base-neutral-border-dynamic-10:           var(--g-neutral-10);
  --base-neutral-border-dynamicAlpha-0-6:     rgba(0,0,0,0.06);
  --base-neutral-border-dynamicAlpha-0-8:     rgba(0,0,0,0.08);
  --base-neutralReverse-border-fixed-100:     var(--g-neutral-100);
  --base-neutralReverse-border-dynamicAlpha-100-8: rgba(255,255,255,0.08);

  /* =================================================================
   * SEMANTIC — brand (CifraClub orange + Cifra Assistant teal +
   * Academy facets). Compasso é single-brand (CifraClub); Academy/Pro
   * variants are visual facets, not multi-brand routing.
   * ================================================================= */
  --base-cifraBrand-foreground-dynamic-68: var(--g-orange-68);
  --base-cifraBrand-foreground-fixed-70:   var(--g-orange-70);
  --base-cifraBrand-background-fixed-68:   var(--g-orange-68);
  --base-cifraBrand-background-fixed-70:   var(--g-orange-70);
  --base-cifraBrand-background-fixedAlpha-70-8:  rgba(255,102,0,0.08);
  --base-cifraBrand-background-fixedAlpha-70-16: rgba(255,102,0,0.16);
  --base-cifraBrand-border-dynamic-68:           var(--g-orange-68);

  --base-cifraAssistant-foreground-dynamic-50:  var(--g-teal-50);
  --base-cifraAssistant-foreground-fixed-50:    var(--g-teal-50);
  --base-cifraAssistant-background-fixed-50:    var(--g-teal-50);
  --base-cifraAssistant-background-fixedAlpha-60-8:  rgba(0,145,110,0.08);
  --base-cifraAssistant-background-fixedAlpha-60-16: rgba(0,145,110,0.16);
  --base-cifraAssistant-border-dynamic-50:      var(--g-teal-50);

  --base-academyBrand-background-fixed-50:      var(--g-teal-50);
  --base-academyAssistant-background-fixed-70:  var(--g-orange-70);

  /* =================================================================
   * SEMANTIC — status (error/success/alert/warning)
   * ================================================================= */
  --status-error-foreground-dynamic-50:    var(--g-red-50);
  --status-error-foreground-dynamic-80:    var(--g-red-80);
  --status-success-foreground-dynamic-50:  var(--g-teal-50);
  --status-success-foreground-dynamic-80:  var(--g-teal-80);
  --status-alert-foreground-dynamic-50:    var(--g-blue-50);
  --status-alert-foreground-dynamic-80:    var(--g-blue-80);

  --status-error-background-fixed-50:      var(--g-red-50);
  --status-success-background-fixed-50:    var(--g-teal-50);
  --status-alert-background-fixed-50:      var(--g-blue-50);
  --status-warning-background-fixed-80:    var(--g-yellow-80);

  --status-error-border-dynamic-50:    var(--g-red-50);
  --status-success-border-dynamic-50:  var(--g-teal-50);
  --status-alert-border-dynamic-50:    var(--g-blue-50);

  /* =================================================================
   * SEMANTIC — decorative (palette acessória)
   * ================================================================= */
  --decorative-orange-foreground-dynamic-50: var(--g-orange-50);
  --decorative-orange-background-fixed-50:   var(--g-orange-50);
  --decorative-blue-foreground-dynamic-50:   var(--g-blue-50);
  --decorative-blue-background-fixed-50:     var(--g-blue-50);
  --decorative-purple-foreground-dynamic-50: var(--g-purple-50);
  --decorative-purple-background-fixed-50:   var(--g-purple-50);
  --decorative-red-foreground-dynamic-50:    var(--g-red-50);
  --decorative-red-background-fixed-50:      var(--g-red-50);
  --decorative-rose-foreground-dynamic-50:   var(--g-rose-50);
  --decorative-rose-background-fixed-50:     var(--g-rose-50);
  --decorative-teal-foreground-dynamic-50:   var(--g-teal-50);
  --decorative-teal-background-fixed-50:     var(--g-teal-50);
  --decorative-yellow-foreground-dynamic-50: var(--g-yellow-50);
  --decorative-yellow-background-fixed-50:   var(--g-yellow-50);
  --decorative-amber-background-fixed-50:    var(--g-amber-60);

  /* =================================================================
   * SEMANTIC — interactive states (alpha overlays)
   * ================================================================= */
  --state-neutral-common-dynamicAlpha-enabled:  rgba(0,0,0,0);
  --state-neutral-common-dynamicAlpha-hovered:  rgba(0,0,0,0.06);
  --state-neutral-common-dynamicAlpha-pressed:  rgba(0,0,0,0.12);
  --state-neutral-common-dynamicAlpha-focused:  rgba(0,0,0,0.06);
  --state-neutral-common-dynamicAlpha-disabled: rgba(0,0,0,0.04);
  --state-neutral-foreground-dynamicAlpha-disabled: rgba(0,0,0,0.24);

  --state-cifraBrand-background-fixedAlpha-hovered: rgba(255,102,0,0.08);
  --state-cifraBrand-background-fixedAlpha-pressed: rgba(255,102,0,0.16);

  /* =================================================================
   * SEMANTIC — overlay / shadows
   * ================================================================= */
  --overlay-fixedAlpha-0-16: rgba(0,0,0,0.16);
  --overlay-fixedAlpha-0-32: rgba(0,0,0,0.32);
  --overlay-fixedAlpha-0-60: rgba(0,0,0,0.60);
  --overlay-fixedAlpha-0-80: rgba(0,0,0,0.80);

  --shadows-dynamicAlpha-0-4:  rgba(0,0,0,0.04);
  --shadows-dynamicAlpha-0-8:  rgba(0,0,0,0.08);
  --shadows-dynamicAlpha-0-40: rgba(0,0,0,0.40);

  --shadow-soft-50:     0 0 50px 0 var(--shadows-dynamicAlpha-0-8);
  --shadow-sharp-30:    0 0 30px 6px var(--shadows-dynamicAlpha-0-8);
  --shadow-contrast-12: 0 4px 12px 6px var(--shadows-dynamicAlpha-0-40);

  /* =================================================================
   * SEMANTIC — chords (domínio cifras)
   * ================================================================= */
  --base-chords-foreground-dynamic-body:                 var(--g-neutral-10);
  --base-chords-foreground-dynamic-fret:                 var(--g-neutral-80);
  --base-chords-foreground-dynamic-neutralSymbol:        var(--g-neutral-10);
  --base-chords-foreground-dynamic-neutralReverseSymbol: var(--g-neutral-100);
  --base-chords-foreground-dynamic-purpleSymbol:         var(--g-purple-50);
  --base-chords-foreground-dynamic-redSymbol:            var(--g-red-50);
  --base-chords-foreground-dynamic-tealSymbol:           var(--g-teal-50);
  --base-chords-foreground-dynamic-orangeSymbol:         var(--g-orange-50);

  /* =================================================================
   * RADIUS — escala paramétrica
   * ================================================================= */
  --radius-small3x: 4px;
  --radius-small2x: 6px;
  --radius-smallX:  10px;
  --radius-small:   12px;
  --radius-base:    16px;
  --radius-large:   20px;
  --radius-largeX:  24px;
  --radius-large2x: 32px;
  --radius-large3x: 40px;
  --radius-round:   999px;

  /* =================================================================
   * SPACING — fixed (Sass) e dynamic (CSS vars adaptativos)
   * ================================================================= */
  --spacing-small3x: 2px;
  --spacing-small2x: 4px;
  --spacing-smallX:  8px;
  --spacing-small:   12px;
  --spacing-base:    16px;
  --spacing-large:   20px;
  --spacing-largeX:  24px;
  --spacing-large2x: 32px;
  --spacing-large3x: 40px;
  --spacing-large4x: 48px;
  --spacing-large5x: 60px;
  --spacing-large6x: 72px;
  --spacing-large7x: 84px;
  --spacing-large8x: 96px;

  --spacing-dynamic-fixedAfterTablet-base-largeX: 16px;
  --spacing-dynamic-fixedAfterTablet-small-base:  12px;

  /* =================================================================
   * Z-INDEX — escala canônica
   * ================================================================= */
  --z-header:        5;
  --z-bottomNav:     6;
  --z-suggest:       6;
  --z-chordTools:    6;
  --z-player:        8;
  --z-advertising:   9;
  --z-sheetOverlay:  10;
  --z-sheet:         11;
  --z-snackbar:      11;
  --z-modalOverlay:  12;
  --z-modal:         13;
  --z-menu:          14;

  /* =================================================================
   * GRID
   * ================================================================= */
  --gridMargin: var(--spacing-dynamic-fixedAfterTablet-base-largeX);
  --gridMaxWidth: calc(1416px + var(--gridMargin) * 2);

  /* =================================================================
   * TYPOGRAPHY — famílias e escalas
   * ================================================================= */
  --font-custom: "Lexend Deca", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-system: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "Roboto Mono", "Courier New", Courier, monospace;

  --fs-small2x: 10px;
  --fs-smallX:  12px;
  --fs-small:   14px;
  --fs-base:    16px;
  --fs-large:   18px;
  --fs-largeX:  20px;
  --fs-large2x: 24px;
  --fs-large3x: 28px;
  --fs-large4x: 32px;
  --fs-large5x: 40px;
  --fs-large6x: 48px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
}

/* =====================================================================
 *  DARK THEME — flip de tokens dynamic
 * ===================================================================== */
[data-theme="dark"] {
  --base-neutral-foreground-dynamic-10:  var(--g-neutral-95);
  --base-neutral-foreground-dynamic-40:  var(--g-neutral-70);
  --base-neutral-foreground-dynamic-50:  var(--g-neutral-80);
  --base-neutral-foreground-dynamic-70:  var(--g-neutral-40);
  --base-neutral-foreground-dynamic-100: var(--g-neutral-10);

  --base-neutral-background-dynamic-0:   var(--g-neutral-100);
  --base-neutral-background-dynamic-10:  var(--g-neutral-100);
  --base-neutral-background-dynamic-15:  var(--g-neutral-95);
  --base-neutral-background-dynamic-20:  var(--g-neutral-90);
  --base-neutral-background-dynamic-30:  var(--g-neutral-80);
  --base-neutral-background-dynamic-40:  var(--g-neutral-70);
  --base-neutral-background-dynamic-50:  var(--g-neutral-60);
  --base-neutral-background-dynamic-60:  var(--g-neutral-50);
  --base-neutral-background-dynamic-70:  var(--g-neutral-40);
  --base-neutral-background-dynamic-80:  var(--g-neutral-30);
  --base-neutral-background-dynamic-90:  var(--g-neutral-20);
  --base-neutral-background-dynamic-95:  var(--g-neutral-15);
  --base-neutral-background-dynamic-100: var(--g-neutral-10);

  --base-neutral-elevation-dynamic-under: var(--g-neutral-10);
  --base-neutral-elevation-dynamic-over:  var(--g-neutral-13);

  --base-neutral-border-dynamic-10: var(--g-neutral-100);
  --base-neutral-border-dynamicAlpha-0-6: rgba(255,255,255,0.06);
  --base-neutral-border-dynamicAlpha-0-8: rgba(255,255,255,0.08);

  --base-cifraBrand-foreground-dynamic-68: var(--g-orange-75);
  --base-cifraBrand-border-dynamic-68:     var(--g-orange-75);
  --base-cifraAssistant-foreground-dynamic-50: var(--g-teal-80);
  --base-cifraAssistant-border-dynamic-50:     var(--g-teal-80);

  --status-error-foreground-dynamic-50:   var(--g-red-80);
  --status-success-foreground-dynamic-50: var(--g-teal-80);
  --status-alert-foreground-dynamic-50:   var(--g-blue-80);

  --decorative-orange-foreground-dynamic-50: var(--g-orange-80);
  --decorative-blue-foreground-dynamic-50:   var(--g-blue-80);
  --decorative-purple-foreground-dynamic-50: var(--g-purple-80);
  --decorative-red-foreground-dynamic-50:    var(--g-red-80);
  --decorative-rose-foreground-dynamic-50:   var(--g-rose-80);
  --decorative-teal-foreground-dynamic-50:   var(--g-teal-80);
  --decorative-yellow-foreground-dynamic-50: var(--g-yellow-80);

  --state-neutral-common-dynamicAlpha-enabled:  rgba(255,255,255,0);
  --state-neutral-common-dynamicAlpha-hovered:  rgba(255,255,255,0.06);
  --state-neutral-common-dynamicAlpha-pressed:  rgba(255,255,255,0.12);
  --state-neutral-common-dynamicAlpha-focused:  rgba(255,255,255,0.06);
  --state-neutral-common-dynamicAlpha-disabled: rgba(255,255,255,0.04);
  --state-neutral-foreground-dynamicAlpha-disabled: rgba(255,255,255,0.24);

  --shadows-dynamicAlpha-0-4:  rgba(0,0,0,0.16);
  --shadows-dynamicAlpha-0-8:  rgba(0,0,0,0.24);
  --shadows-dynamicAlpha-0-40: rgba(0,0,0,0.80);

  --base-chords-foreground-dynamic-body:                 var(--g-neutral-50);
  --base-chords-foreground-dynamic-fret:                 var(--g-neutral-30);
  --base-chords-foreground-dynamic-neutralSymbol:        var(--g-neutral-100);
  --base-chords-foreground-dynamic-neutralReverseSymbol: var(--g-neutral-10);
  --base-chords-foreground-dynamic-purpleSymbol:         var(--g-purple-80);
  --base-chords-foreground-dynamic-redSymbol:            var(--g-red-80);
  --base-chords-foreground-dynamic-tealSymbol:           var(--g-teal-80);
  --base-chords-foreground-dynamic-orangeSymbol:         var(--g-orange-80);
}

/* =====================================================================
 *  TYPE STYLES — mixins traduzidos para classes utilitárias.
 *  Convenção: <role><freedom><strength><scale>.
 *  Use estas classes OU as semantic abaixo (h1, p, code...).
 * ===================================================================== */

/* Display — só dynamic up. Hero / página de marca. */
.displayDynamicUpStrongLargeX {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 40px; line-height: 50px; letter-spacing: -0.01em;
}
.displayDynamicUpStrongLarge {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 32px; line-height: 42px; letter-spacing: -0.01em;
}
.displayDynamicUpStrongBase {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 28px; line-height: 38px; letter-spacing: -0.01em;
}
@media (min-width: 1200px) {
  .displayDynamicUpStrongLargeX { font-size: 48px; line-height: 58px; }
  .displayDynamicUpStrongLarge  { font-size: 40px; line-height: 50px; }
  .displayDynamicUpStrongBase   { font-size: 32px; line-height: 40px; }
}

/* Title — tem dynamicUp / dynamicDown / fixed. */
.titleDynamicUpStrongLargeX {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 24px; line-height: 32px; letter-spacing: -0.01em;
}
.titleDynamicUpStrongLarge {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 20px; line-height: 28px; letter-spacing: -0.01em;
}
.titleDynamicUpStrongBase {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 18px; line-height: 26px; letter-spacing: -0.01em;
}
.titleDynamicUpStrongSmall {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 16px; line-height: 22px; letter-spacing: -0.01em;
}
.titleDynamicUpStrongSmallX {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 14px; line-height: 20px; letter-spacing: -0.01em;
}
@media (min-width: 1200px) {
  .titleDynamicUpStrongLargeX { font-size: 28px; line-height: 36px; }
  .titleDynamicUpStrongLarge  { font-size: 24px; line-height: 32px; }
  .titleDynamicUpStrongBase   { font-size: 20px; line-height: 28px; }
  .titleDynamicUpStrongSmall  { font-size: 18px; line-height: 24px; }
  .titleDynamicUpStrongSmallX { font-size: 16px; line-height: 22px; }
}

.titleFixedStrongLarge {
  font-family: var(--font-custom); font-weight: var(--fw-semibold);
  font-size: 20px; line-height: 28px; letter-spacing: -0.01em;
}

/* Body — texto de UI. Roboto. */
.bodyFixedNormalLarge   { font-family: var(--font-system); font-weight: 400; font-size: 20px; line-height: 30px; }
.bodyFixedNormalBase    { font-family: var(--font-system); font-weight: 400; font-size: 16px; line-height: 24px; }
.bodyFixedNormalSmall   { font-family: var(--font-system); font-weight: 400; font-size: 14px; line-height: 20px; }
.bodyFixedNormalSmallX  { font-family: var(--font-system); font-weight: 400; font-size: 12px; line-height: 18px; }
.bodyFixedModerateBase    { font-family: var(--font-system); font-weight: 500; font-size: 16px; line-height: 24px; }
.bodyFixedModerateSmall   { font-family: var(--font-system); font-weight: 500; font-size: 14px; line-height: 20px; }
.bodyFixedModerateSmallX  { font-family: var(--font-system); font-weight: 500; font-size: 12px; line-height: 18px; }
.bodyFixedStrongestBase   { font-family: var(--font-system); font-weight: 700; font-size: 16px; line-height: 24px; }
.bodyFixedStrongestSmall  { font-family: var(--font-system); font-weight: 700; font-size: 14px; line-height: 20px; }

/* Label — para chips/buttons/tags. Linha tight. */
.labelFixedModerateLarge   { font-family: var(--font-system); font-weight: 500; font-size: 20px; line-height: 24px; }
.labelFixedModerateBase    { font-family: var(--font-system); font-weight: 500; font-size: 16px; line-height: 20px; }
.labelFixedModerateSmall   { font-family: var(--font-system); font-weight: 500; font-size: 14px; line-height: 18px; }
.labelFixedModerateSmallX  { font-family: var(--font-system); font-weight: 500; font-size: 12px; line-height: 16px; }
.labelFixedNormalSmall     { font-family: var(--font-system); font-weight: 400; font-size: 14px; line-height: 18px; }

/* Caption — small uppercase-ish microcopy. */
.captionFixedStrongestBase {
  font-family: var(--font-system); font-weight: 700; font-size: 10px; line-height: 12px;
  letter-spacing: 0.04em;
}
.captionFixedNormalBase {
  font-family: var(--font-system); font-weight: 400; font-size: 10px; line-height: 12px;
  letter-spacing: 0.04em;
}

/* Content (long-form) — paragraph leading 1.6 */
.contentSansFixedNormalBase    { font-family: var(--font-system); font-weight: 400; font-size: 20px; line-height: 1.6; }
.contentSansFixedStrongestBase { font-family: var(--font-system); font-weight: 700; font-size: 20px; line-height: 1.6; }

/* Mono — é o de cifras. Roboto Mono. */
.contentMonoFixedNormalBase    { font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 1.6; }
.contentMonoFixedStrongestBase { font-family: var(--font-mono); font-weight: 700; font-size: 14px; line-height: 1.6; }

/* =====================================================================
 *  SEMANTIC ALIASES — para uso "rápido" tipo h1/h2/p/code.
 *  São aliases convenientes; em produção, prefira as classes acima.
 * ===================================================================== */
h1 { font: inherit; }
h2 { font: inherit; }
h3 { font: inherit; }

.h1     { composes: displayDynamicUpStrongLargeX; }
.h2     { composes: displayDynamicUpStrongLarge; }
.h3     { composes: titleDynamicUpStrongLargeX; }
.h4     { composes: titleDynamicUpStrongLarge; }
.h5     { composes: titleDynamicUpStrongBase; }
.p      { composes: bodyFixedNormalBase; }
.small  { composes: bodyFixedNormalSmall; }
.code   { composes: contentMonoFixedNormalBase; }
.chord  { composes: contentMonoFixedStrongestBase; }

/* Convenience: o body padrão */
body {
  font-family: var(--font-system);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--base-neutral-foreground-dynamic-10);
  background: var(--base-neutral-background-dynamic-100);
  -webkit-font-smoothing: antialiased;
}