@import url("../tools/selectors.css");

/* To scope these styles to main content (i.e. not header, not navbar) */
/* To prevent these styles on portal content (i.e. within a React app) */
/* TODO: Delete `:not(…)` after tup-ui does not load `core-styles.cms.css` */
:where(:--main-content, :not(:--portal-content)) {



/* Structure */

&:is( h1, h2, h3, h4, h5, h6 ) {
    line-height: unset; /* mimics headings--cms.css */
}
& h1 {
    text-transform: uppercase; /* mimics headings--cms.css */
}



/* Skin */

& h1 {
    font-size: var(--global-font-size--xxx-large);
    font-weight: var(--black);
}
& h2 {
    font-size: var(--global-font-size--xx-large);
    font-weight: var(--bold);
}
& h3 {
    font-size: var(--global-font-size--x-large);
    font-weight: var(--bold);
}
/* WARNING: No design available; these are just developer guesswork */
& h4 {
    font-size: var(--global-font-size--large);
    font-weight: var(--bold);
}
/* To  deter use of "smaller" headings by making them match body font */
& h5,
& h6 {
    font-size: inherit;
    font-weight: var(--normal);
}



}