/*
 * The English Lab — typography & surface foundation
 *
 * Applies the token values from tokens.css to Tutor LMS frontend screens.
 * This is the foundation layer only: fonts, color, and type scale.
 * Component-level restyling (cards, pill buttons, progress, stat blocks)
 * comes in a later pass once real per-screen markup is mapped.
 */

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) {
	background-color: var(--tel-bg);
	color: var(--tel-ink);
	font-family: var(--tel-font-body);
}

/* .tutor-user-public-profile is an in-page wrapper, not body — background
   is scoped to the wrapper itself rather than the whole viewport, since
   this template's body class is 'blog' and shares chrome with regular
   posts. */
.tutor-user-public-profile {
	background-color: var(--tel-bg);
	color: var(--tel-ink);
	font-family: var(--tel-font-body);
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h1,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h2,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h3,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h4,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h5,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h6,
.tutor-user-public-profile h1,
.tutor-user-public-profile h2,
.tutor-user-public-profile h3,
.tutor-user-public-profile h4,
.tutor-user-public-profile h5,
.tutor-user-public-profile h6 {
	font-family: var(--tel-font-body);
	font-weight: 700;
	color: var(--tel-ink);
	text-wrap: balance;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h1,
.tutor-user-public-profile h1 {
	font-size: clamp(28px, 4vw, 40px);
	letter-spacing: -0.035em;
	line-height: 1.05;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h2,
.tutor-user-public-profile h2 {
	font-size: clamp(22px, 3vw, 28px);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h3,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) h4,
.tutor-user-public-profile h3,
.tutor-user-public-profile h4 {
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) p,
body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) li,
.tutor-user-public-profile p,
.tutor-user-public-profile li {
	line-height: 1.5;
	text-wrap: pretty;
}

body.tutor-frontend:not(:has(.tutor-account-page-wrapper)) a,
.tutor-user-public-profile a {
	color: var(--tel-cobalt);
}

/* Homepage course-grid widget (.elementor-widget-etlms-course-list —
   see components.css for the full explanation). No background-color
   here deliberately: the Elementor section already provides the dark
   background, this only needs to fix text color/font on top of it. */
.elementor-widget-etlms-course-list h1,
.elementor-widget-etlms-course-list h2,
.elementor-widget-etlms-course-list h3,
.elementor-widget-etlms-course-list h4,
.elementor-widget-etlms-course-list h5,
.elementor-widget-etlms-course-list h6 {
	font-family: var(--tel-font-body);
	font-weight: 700;
	color: var(--tel-ink);
	text-wrap: balance;
}

.elementor-widget-etlms-course-list h3,
.elementor-widget-etlms-course-list h4 {
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.elementor-widget-etlms-course-list p,
.elementor-widget-etlms-course-list li {
	line-height: 1.5;
	text-wrap: pretty;
}

.elementor-widget-etlms-course-list a {
	color: var(--tel-cobalt);
}

/* Micro-label utility — metadata/eyebrow text (labels, timestamps, tags,
   counters). Not yet wired into any template; available for the
   component pass. */
.tel-eyebrow {
	font-family: var(--tel-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tel-ink-faint);
}