/* * The English Lab — design tokens * * Scoped to Tutor LMS frontend screens only (course archive, single course, * lesson, quiz, student dashboard) via body.tutor-frontend — the class * Tutor LMS adds on exactly those screens and no others (confirmed against * the live site + Tutor LMS 4.0.1 source: classes/Assets.php * add_identifier_class_to_body()). Elementor-built marketing pages * (home, sobre, contato) are untouched. * * .tutor-user-public-profile is added on top: the instructor/public * profile page (/profile/{user}?view=instructor) uses Tutor's own UI * classes but does NOT get body.tutor-frontend (confirmed live — Tutor's * body-class logic only flags course archive/single/dashboard, missing * this template), so it needs its own scope hook. * * :not(:has(.tutor-account-page-wrapper)) excludes Tutor's Account/ * Preferences pages (templates/account.php, e.g. /painel/account/ * settings/). That template renders its own standalone document * (bypassing the theme) but still gets body.tutor-frontend and still * loads our enqueued CSS via wp_head(). It ships its own complete, * accessible design system (dark/light/high-contrast/colorblind modes * via [data-tutor-theme] on , a separate --tutor-surface-* and * --tutor-text-* token namespace) that was never in our re-skin scope. * * Dark mode is driven by Tutor's OWN [data-tutor-theme="dark"] attribute * on (its native, user-facing Preferences toggle — Account > * Preferences > Appearance > Theme), NOT by the OS-level * prefers-color-scheme media query. Tutor's dashboard/stat-card/ * continue-learning components (tutor-dashboard.min.css) already use * this same attribute to theme themselves via their own * --tutor-surface-* and --tutor-text-* tokens — if our tokens tracked the * OS preference instead, the two systems could disagree (Tutor dark + * OS light = Tutor's own dark card backgrounds with our light-mode * dark-on-dark text). Confirmed root cause of two separate contrast * bugs 2026-07-18. * * Accent: Indigo (chosen sitewide per design-handoff README — do not mix * with the Amber alternate). */ body.tutor-frontend:not(:has(.tutor-account-page-wrapper)), .tutor-user-public-profile { --tel-cobalt: #1a56db; --tel-cobalt-rgb: 26, 86, 219; --tel-accent: #6c63ff; --tel-charcoal: #1a202c; --tel-cloud: #f5f7fa; --tel-sky: #ebf4ff; --tel-mist: #e8edf5; --tel-muted: #6b7280; --tel-bg: var(--tel-cloud); --tel-bg-alt: var(--tel-mist); --tel-ink: var(--tel-charcoal); --tel-ink-soft: rgb(26 32 44 / 68%); --tel-ink-faint: rgb(26 32 44 / 36%); --tel-rule: rgb(26 32 44 / 12%); --tel-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tel-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --tel-radius-card: 14px; --tel-radius-pill: 999px; --tel-space-page: 40px; --tel-space-card: 24px; --tel-space-gap: 18px; } html[data-tutor-theme='dark'] body.tutor-frontend:not(:has(.tutor-account-page-wrapper)), html[data-tutor-theme='dark'] .tutor-user-public-profile { --tel-cobalt: #4a90e2; --tel-cobalt-rgb: 74, 144, 226; --tel-accent: #8b86f0; --tel-bg: var(--tel-charcoal); --tel-bg-alt: #22293a; --tel-ink: var(--tel-cloud); --tel-ink-soft: rgb(245 247 250 / 66%); --tel-ink-faint: rgb(245 247 250 / 32%); --tel-rule: rgb(245 247 250 / 14%); }