/* components/title/title.css — Title (doc, Componentes > Title). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Alias: valor por defecto; un Tema lo cambia en ms.theme */
  :root {
    --ms-titleTextStyle_1_family: var(--ms-textStyle_headlineL_family);
    --ms-titleTextStyle_1_size: var(--ms-textStyle_headlineL_size);
    --ms-titleTextStyle_1_lineHeight: var(--ms-textStyle_headlineL_lineHeight);
    --ms-titleTextStyle_1_weight: var(--ms-textStyle_headlineL_weight);
    --ms-titleTextStyle_2_family: var(--ms-textStyle_headlineM_family);
    --ms-titleTextStyle_2_size: var(--ms-textStyle_headlineM_size);
    --ms-titleTextStyle_2_lineHeight: var(--ms-textStyle_headlineM_lineHeight);
    --ms-titleTextStyle_2_weight: var(--ms-textStyle_headlineM_weight);
    --ms-titleTextStyle_3_family: var(--ms-textStyle_titleL_family);
    --ms-titleTextStyle_3_size: var(--ms-textStyle_titleL_size);
    --ms-titleTextStyle_3_lineHeight: var(--ms-textStyle_titleL_lineHeight);
    --ms-titleTextStyle_3_weight: var(--ms-textStyle_titleL_weight);
    --ms-titleTextStyle_4_family: var(--ms-textStyle_titleM_family);
    --ms-titleTextStyle_4_size: var(--ms-textStyle_titleM_size);
    --ms-titleTextStyle_4_lineHeight: var(--ms-textStyle_titleM_lineHeight);
    --ms-titleTextStyle_4_weight: var(--ms-textStyle_titleM_weight);
  }

  /* Title: nivel 1 por defecto; data-ms-variant elige el nivel. Dentro de
     Text Block, cada etiqueta de título toma su nivel. */
  .ms-title, .ms-text-block :where(h1:not([class^="ms-"], [class*=" ms-"]), h2:not([class^="ms-"], [class*=" ms-"]), h3:not([class^="ms-"], [class*=" ms-"]), h4:not([class^="ms-"], [class*=" ms-"]), h5:not([class^="ms-"], [class*=" ms-"]), h6:not([class^="ms-"], [class*=" ms-"])) {
    margin: 0;
    color: var(--ms-color_content);
  }
  .ms-title, .ms-title[data-ms-variant="1"], .ms-text-block :where(h1:not([class^="ms-"], [class*=" ms-"])) { font-family: var(--ms-titleTextStyle_1_family); font-size: var(--ms-titleTextStyle_1_size); line-height: var(--ms-titleTextStyle_1_lineHeight); font-weight: var(--ms-titleTextStyle_1_weight); }
  .ms-title[data-ms-variant="2"], .ms-text-block :where(h2:not([class^="ms-"], [class*=" ms-"])) { font-family: var(--ms-titleTextStyle_2_family); font-size: var(--ms-titleTextStyle_2_size); line-height: var(--ms-titleTextStyle_2_lineHeight); font-weight: var(--ms-titleTextStyle_2_weight); }
  .ms-title[data-ms-variant="3"], .ms-text-block :where(h3:not([class^="ms-"], [class*=" ms-"])) { font-family: var(--ms-titleTextStyle_3_family); font-size: var(--ms-titleTextStyle_3_size); line-height: var(--ms-titleTextStyle_3_lineHeight); font-weight: var(--ms-titleTextStyle_3_weight); }
  .ms-title[data-ms-variant="4"], .ms-text-block :where(h4:not([class^="ms-"], [class*=" ms-"]), h5:not([class^="ms-"], [class*=" ms-"]), h6:not([class^="ms-"], [class*=" ms-"])) { font-family: var(--ms-titleTextStyle_4_family); font-size: var(--ms-titleTextStyle_4_size); line-height: var(--ms-titleTextStyle_4_lineHeight); font-weight: var(--ms-titleTextStyle_4_weight); }
}