/* ========================================================================== Course color palette tokens - LMS v0.3.119 Retarget 2026-09-25: Apple iPhone 18 Pro page dark language (owner order). Source values captured from the live Apple page study into the TVP Apple theme.json (Apple Black #000000, Card #1D1D1F, text #F5F5F7 / #A1A1A6 / #8E8E93, link #2997FF, button #0071E3). Token NAMES are unchanged so every consumer resolves without edits; only values, fallbacks, and the measured pair table below moved. Contrast re-measured 2026-09-25 against WCAG 2.x AA (4.5:1 normal text). Book brand (navy #003965 / gold #E2B33D / red #C8102E) is LOCKED and untouched; this file is course-site surfaces only. TOKENS ONLY. No plugin code. ========================================================================== */ :root { /* ------------------------------------------------------------------ Base tokens - the six course colors, Apple-dark retarget ------------------------------------------------------------------ */ /* Field - Apple Black #000000. Page field (was warm cream Egret #F3ECE0). Lesson content, motion sheets, and quiz surfaces sit on black, the same field as the Apple page hero and the TVP Apple dashboard. */ --course-egret: #000000; /* Primary text - Apple Primary Text #F5F5F7 (was warm near-black #221A12). 19.29:1 on the black field. */ --course-kiln-ink: #F5F5F7; /* Accent - Apple Link blue #2997FF (was Arabian Spice #A85B2A). Decorative accent: option-row chrome, quiet-button borders, toggle fills. 6.96:1 on black, 5.58:1 on card - text-safe at both. */ --course-arabian-spice: #2997FF; /* Heritage Gold - brand signature. LOCKED at #E2B33D, not altered. On course surfaces: decorative rules/accents per the brand guide's gold-as-rules-and-accents system. 10.75:1 on black. */ --course-heritage-gold: #E2B33D; /* Tint surface - Apple Card #1D1D1F (was Candied Ginger #C4A784). Soft section tint: card fills, quiet dividers, quiz option surfaces. */ --course-candied-ginger: #1D1D1F; /* Deep surface - Apple Black #000000 (was Toffee #6C533E). Deep surfaces (player bar, footer, deep chrome) merge with the field, the way deep chrome sits on black on the Apple page. */ --course-toffee: #000000; /* ------------------------------------------------------------------ Derived functional tokens - all reference the base tokens above ------------------------------------------------------------------ */ /* Primary text. 19.29:1 on black field, 15.46:1 on card. */ --course-text-primary: var(--course-kiln-ink); /* Secondary text - Apple Secondary #A1A1A6 (was #6A5A41). 8.16:1 on black, 6.54:1 on card (PASS both). */ --course-text-muted: #A1A1A6; /* Tertiary body text - Apple Muted #8E8E93 (was #5C5248). 6.44:1 on black, 5.16:1 on card (PASS both). */ --course-text-body: #8E8E93; /* Links - Apple Link #2997FF (was darkened spice #864B24). 6.96:1 on black, 5.58:1 on card (PASS both, no darkening needed). */ --course-link: #2997FF; --course-link-hover: var(--course-kiln-ink); /* Primary buttons: Apple Button #0071E3 (was Princess Blue #00539C per the 2026-09-19 owner ruling; superseded by the 2026-09-25 Apple-page order). White text on #0071E3 is 4.70:1 (PASS AA normal). Hover DEEPENS to #0068D1 (5.38:1, PASS) instead of Apple's #0077ED: Apple's own hover with white text measures 4.32:1 and fails AA normal, so this file keeps its measured-AA contract with the darker hover. */ --course-button-bg: #0071E3; --course-button-text: #FFFFFF; --course-button-bg-hover: #0068D1; --course-button-text-hover: #FFFFFF; /* Deep surfaces (player bar, footer). Merged with the black field; primary text #F5F5F7 on deep is 19.29:1 (PASS). Muted #A1A1A6 also passes on deep (8.16:1), so the old deep-surface text restriction (rule 1) is lifted: the full text scale is safe on deep now. */ --course-surface-deep: var(--course-toffee); --course-text-on-deep: #F5F5F7; /* Soft tint surfaces (cards). Primary text on card is 15.46:1 (PASS), muted 6.54:1 (PASS), body 5.16:1 (PASS). */ --course-surface-tint: var(--course-candied-ginger); --course-text-on-tint: var(--course-kiln-ink); /* Cards - Apple Card #1D1D1F (was white). */ --course-surface-card: #1D1D1F; /* Gold as accent ink. 10.75:1 on black: text-safe now, but kept DECORATIVE / NON-TEXT by brand discipline (rules, checkmarks, dots, dividers), matching the brand guide's gold-as-rules-and-accents system. */ --course-gold-accent: var(--course-heritage-gold); /* Brand red slash. #C8102E is LOCKED brand red: decorative/non-text only (slashes, rules). Do NOT use as text on black (2.96:1, FAILS AA). */ --course-red-rule: #C8102E; /* Focus ring. WCAG 2.4.11 needs 3:1 against adjacent colors. Primary text #F5F5F7 on black is 19.29:1, on card 15.46:1. */ --course-focus-ring: var(--course-kiln-ink); /* Focus ring on deep surfaces. White on black is 21:1 (>= 3:1). */ --course-focus-ring-on-deep: #FFFFFF; /* Error text: form errors, quiz incorrect answers. Apple dark-mode red #FF453A: 6.16:1 on black (PASS AA normal). Brand red #C8102E stays decorative-only (see --course-red-rule). */ --course-text-error: #FF453A; /* Success text: quiz correct answers. Apple dark-mode green #30D158: 10.39:1 on black (PASS AA normal). */ --course-text-success: #30D158; /* Disabled states. WCAG 1.4.3 exempts inactive UI components from the contrast requirement, so no disabled color tokens are measured or added, by design. Convention: disabled controls render their normal colors at 50% opacity with cursor:not-allowed. */ } /* ========================================================================== ALLOWED-USAGE RULES (measured 2026-09-25, WCAG AA normal text = 4.5:1) 1. Deep surfaces are merged with the black field. The full text scale is safe on deep: primary 19.29:1, muted 8.16:1, body 6.44:1. 2. --course-text-muted (#A1A1A6) passes on black (8.16:1) and card (6.54:1). --course-text-on-tint is primary text (15.46:1 on card). 3. Links use --course-link (#2997FF): 6.96:1 on black, 5.58:1 on card. 4. Gold stays decorative/non-text by brand discipline (rules, checkmarks, dots, dividers), even though 10.75:1 on black would pass as text. 5. Functional states. --course-text-error (#FF453A, 6.16:1 on black) and --course-text-success (#30D158, 10.39:1 on black) are dark-field tokens. Brand red #C8102E is decorative-only on dark. Focus ring: --course-focus-ring on field and tint surfaces, --course-focus-ring-on-deep on deep surfaces. Disabled controls render their normal colors at 50% opacity with cursor:not-allowed; no disabled color tokens (WCAG 1.4.3 exempts inactive controls). ========================================================================== */