@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;
}
& h1 {
    margin-bottom: 40px; /* rounded from design 42px */
    text-transform: uppercase;
}
& h2 {
    margin-top: 0px; /* depends on interpretation of design */
    margin-bottom: 30px; /* rounded from design 31px */
}
& h3 {
    margin-top: 0; /* designs suggest component padding can give top spacing */
    margin-bottom: 20px; /* rounded from design 17px */
}



/* Skin */

& h1 {
    font-size: var(--global-font-size--xx-large);
    font-weight: var(--black);
}
& h2 {
    color: var(--global-color-accent--secondary);
    font-size: var(--global-font-size--x-large);
    font-weight: var(--black);
}
& h3 {
    font-size: var(--global-font-size--large);
    font-weight: var(--black);
}
/* WARNING: No design available; these are just developer guesswork */
& h4 {
    font-size: var(--global-font-size--medium);
    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);
}



}