/** ===========================================================================
 * typography styles for Tommy Flowers Foundation - Theme
 * ============================================================================
 * 1 - headings and subheadings
 * 2 - paragraphs
 * 3 - lists
 * 4 - error, debug, & instructions
 */

/* ----------------------------------------------------------------------------
 * 1 - headings and subheadings
 * --------------------------------------------------------------------------*/

h2 { margin: 0; }

.on_ight p,
.on_ight h1,
.on_ight h2,
.on_ight h3 {
	color: var(--wp--preset--color--theme-black-offk);
	}

.on_dark p:not(.on_dark ul li div p),
.on_dark h2:not(.on_dark ul li div h2),
.on_dark h3 {
	color: var(--wp--preset--color--theme-manilla);
	}

p.subheading {
	color: var(--wp--preset--color--theme-red);
	font-family: var(--wp--preset--font-family--jost-body);
	font-size: var(--wp--preset--font-size--fs-large);
	font-weight: var(--wp--custom--fw-semi-bold);
	margin-top: 0;
	}

/* ----------------------------------------------------------------------------
 * 2 - paragraphs
 * --------------------------------------------------------------------------*/

/* intro paragaphs */

article p.is-style-intro-block {
	font-size: var(--wp--preset--font-size--fs-large);
	line-height: var(--wp--custom--lh-large);
	}

article p.is-style-intro-block { margin: 0 0 var(--wp--preset--spacing--80) 0; }
 
/* paragaphs */

article p:not(p.is-style-intro-block):not(p.subheading) { margin: 0 0 var(--wp--preset--spacing--70) 0; }


/* ----------------------------------------------------------------------------
 * 3 - lists
 * --------------------------------------------------------------------------*/

main ul { margin: 0 0 var(--wp--preset--spacing--70) 0; }

/* ----------------------------------------------------------------------------
 * 4 - error, debug, & instructions
 * ----------------------------------------------------------------------------
 */

p.debug, span.debug {
	background-color: rgb(201, 255, 201);
	color: var(--wp--preset--color--theme-grey-dark);
	font-size: var(--wp--preset--font-size--fs-small);
	font-weight: var(--wp-custom--fw-regular);
	}

p.error, p span.error {
	background-color: pink;
	color: darkred;
	font-size: var(--wp--preset--font-size--fs-small);
	font-weight: var(--wp-custom--fw-regular);
	padding: var(--wp--preset--spacing--50)
	}