/** * PPF Pro Blueprint: $10k student-backend design tokens (T0 CANONICAL, 2026-09-13). * * T0 status: FOUNDATION, ZERO VISUAL CHANGE. This file defines the approved * token set; companion alias work (t0-alias-map.json) re-expresses every * existing student component in these tokens with IDENTICAL computed values. * Nothing in this file is referenced by shipped CSS until the T0 proof * (computed-style diff = zero) passes independent verification. * * SCOPE (hard rule): declared on .ppfb-scope, .ppfb-chrome, .ppfb-footer ONLY. * Never :root: nothing may leak into wp-admin or the marketing pages. * (Spec §1/6; panel: design-systems expert.) * * T0 VALUE RULE: every token REFERENCED by the T0 alias map carries the * CURRENT computed value (zero-change guarantee). Where the approved design * target differs, the token keeps its canonical NAME with the current value * and a "T2:" note naming the retarget. Tokens no component references yet * (shadows, ceremony sizes, display tracking) carry the approved values and * are inert until T2. Names are the API; values move in T2. * * OVERFLOW HARD RULE (spec §1/47): horizontal guards use `overflow-x: clip`, * NEVER `hidden`: `hidden` recomputes the other axis to `auto` and silently * breaks future sticky elements. Enforced by t0-lint-tokens.py (fails the * build on `overflow-x: hidden` in T0-owned CSS). * * STREAK: removed per spec §1/7 (rejected gamification). Fourth stat cell = * module trajectory: see --ppfb-10k-stat-4-label usage in T2. * (v0.3.112: Shop Hours removed by owner order.) */ .ppfb-scope, .ppfb-chrome, .ppfb-footer { /* ============ TYPE: per-role families (spec §1/8, §1.7/26) ============ */ /* Display/numerals/ceremony: Source Serif 4, Google-hosted (NOT self- hosted; DarkStar's HPG font ruling does not apply). Typeface lock: docs/typeface-lock-2026-09-13.md. Inert in T0 (no shipped rule references a family yet); T2 wires it per the numeral-role rule. */ --ppfb-10k-font-display: "Source Serif 4", Georgia, "Times New Roman", serif; /* UI + body: system-native stack (unchanged from current). */ --ppfb-10k-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ppfb-10k-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Scale. T0: current values. rem assumes the browser 16px root. */ --ppfb-10k-text-micro: 0.75rem; /* 12px: legal, timestamps; never body (inert T0) */ --ppfb-10k-text-14px: 0.875rem; /* 14px: quiet meta, crumbs, footer (current) */ --ppfb-10k-text-144px: 0.9rem; /* 14.4px: dashboard status (current; T2: → 14px) */ --ppfb-10k-text-15px: 0.9375rem; /* 15px: helper/quiz meta (current; T2: → scale) */ --ppfb-10k-text-ui: 1rem; /* 16px: buttons, inputs, nav */ --ppfb-10k-text-17px: 17px; /* .ppfb-scope base (current; px kept deliberately: swapping px→rem would change user-font-scaling behavior; T2 unifies consciously, not silently) */ --ppfb-10k-text-body: 1.0625rem; /* 17px: h3, lesson prose measure */ --ppfb-10k-text-18px: 1.125rem; /* up-next title (current; T2: → scale) */ --ppfb-10k-text-lg: 1.25rem; /* h2 / card titles */ --ppfb-10k-text-xl: 1.5rem; /* (inert T0) section titles ≥768px */ --ppfb-10k-text-2xl: 1.75rem; /* h1 / dashboard title */ --ppfb-10k-text-2xl-sm: 1.4rem; /* h1 at ≤480px (current; T2: → scale) */ --ppfb-10k-text-display: 2rem; /* (inert T0) ceremony numerals, mobile */ --ppfb-10k-text-display-lg: 2.75rem; /* (inert T0) ceremony numerals ≥768px */ --ppfb-10k-text-hero: clamp(2.5rem, 10vw, 4rem); /* (inert T0) dashboard greeting */ /* Weights */ --ppfb-10k-weight-regular: 400; --ppfb-10k-weight-medium: 500; /* (inert T0) quiet emphasis, never headings */ --ppfb-10k-weight-semibold: 600; --ppfb-10k-weight-bold: 700; --ppfb-10k-weight-extrabold: 800; /* eyebrows + display numerals only */ /* Line heights */ --ppfb-10k-leading-tight: 1.15; /* (inert T0) display numerals, hero */ --ppfb-10k-leading-snug: 1.25; /* headings */ --ppfb-10k-leading-ui: 1.4; /* buttons, labels */ --ppfb-10k-leading-15: 1.5; /* form-adjacent text (current) */ --ppfb-10k-leading-16: 1.6; /* review text (current) */ --ppfb-10k-leading-body: 1.65; /* lesson prose */ /* Tracking (spec §1.7/27). Current eyebrow 0.08em kept in T0; the +0.12em retarget and display/cert tracking land in T2. */ --ppfb-10k-eyebrow-size: 0.8125rem; --ppfb-10k-eyebrow-tracking: 0.08em; /* T2: → 0.12em */ --ppfb-10k-eyebrow-weight: 800; --ppfb-10k-tracking-display: -0.01em; /* (inert T0) display-xl/display */ --ppfb-10k-tracking-h1: -0.005em; /* (inert T0) H1 */ /* v0.3.63: --ppfb-10k-tracking-cert removed with the certificate card. */ --ppfb-10k-tracking-wordmark: 0.015em;/* chrome wordmark (current) */ --ppfb-10k-tracking-dash: 0.01em; /* chrome dash pill (current) */ --ppfb-10k-underline-offset: 2px; /* link underline offset (current) */ /* Numerals: tabular figures so scores never jitter in live regions. Lining is the served font's default (gate: hidden_files/check-font-figures.py). */ --ppfb-10k-numeral: tabular-nums; /* (inert T0) .ppfb-10k-numeral utility in T2 */ /* ============ SPACING (4px base; ad-hoc currents kept as named tokens) ============ */ --ppfb-10k-space-1: 0.25rem; --ppfb-10k-space-15: 0.375rem; /* chrome-dash ≤480px (current) */ --ppfb-10k-space-2: 0.5rem; --ppfb-10k-space-24: 0.6rem; /* lesson-item row padding (current) */ --ppfb-10k-space-25: 0.625rem; /* cooldown chip, tool rows (current) */ --ppfb-10k-space-26: 0.65rem; /* collapsed-crumb tap pad (current) */ --ppfb-10k-space-3: 0.75rem; --ppfb-10k-space-35: 0.875rem; /* chrome/bar paddings (current) */ --ppfb-10k-space-4: 1rem; --ppfb-10k-space-45: 1.125rem; /* quiz-result padding-x (current) */ --ppfb-10k-space-5: 1.25rem; /* gutters, card padding */ --ppfb-10k-space-6: 1.5rem; --ppfb-10k-space-7: 1.75rem; /* chrome bottom margin (current) */ --ppfb-10k-space-8: 2rem; --ppfb-10k-space-10: 2.5rem; /* footer bottom pad (current) */ --ppfb-10k-space-12: 3rem; /* (inert T0) major section breaks */ --ppfb-10k-space-16: 4rem; /* (inert T0) ceremony spacing */ --ppfb-10k-gap-em-04: 0.4em; /* crumb separator (current) */ --ppfb-10k-gap-em-05: 0.5em; /* download meta offset (current) */ --ppfb-10k-bleed: -1.25rem; /* video edge-bleed, ≤480px (load-bearing) */ --ppfb-10k-skip-off: -4rem; /* skip-link park position */ --ppfb-10k-video-ratio: 56.25%; /* 16:9 box */ /* ============ COLOR: Fall 2026 palette (v0.3.56, seat I) ============ Every color token below aliases the finalized course palette contract (assets/css/palette-tokens-v0.3.56.css, handle ppfb-palette-tokens), so this layer carries ZERO hex literals of its own. Token NAMES are retained for API stability; values are the v0.3.56 retarget. Ratios cited are the contract's WCAG 2.x AA measurements (palette-contrast-report.md). Names that no longer describe their hue (gold-700) are kept because shipped selectors reference them; their comments name the retarget. Inert T0 tokens keep their legacy values (unused; no rendered effect). */ --ppfb-10k-paper: var(--course-egret); /* page field */ --ppfb-10k-card: var(--course-surface-card); /* raised card on field */ --ppfb-10k-line: var(--course-candied-ginger); /* hairlines, quiet dividers */ --ppfb-10k-eyebrow: var(--course-link); /* eyebrow ink, 5.87:1 on Egret */ --ppfb-10k-ink: var(--course-text-primary); /* body ink, 14.61:1 on Egret */ --ppfb-10k-ink-soft: #2a2d33; /* (inert T0) softened ink, large display */ --ppfb-10k-quiet: var(--course-text-muted); /* quiet meta, 5.67:1 on Egret */ --ppfb-10k-black: var(--course-link-hover); /* link/button hover ink */ /* Deep surfaces: Toffee. Rule 1: Egret or white text ONLY on Toffee. */ --ppfb-10k-charcoal-900: var(--course-surface-deep); /* deep chrome */ --ppfb-10k-charcoal-800: #151a22; /* (inert T0) raised on charcoal */ --ppfb-10k-charcoal-700: #1e2530; /* (inert T0) hover / borders-on-dark */ --ppfb-10k-line-on-dark: #2a323f; /* (inert T0) hairlines on charcoal */ --ppfb-10k-quiet-on-charcoal: var(--course-text-on-deep); /* Egret (rule 1) */ --ppfb-10k-ink-on-charcoal: var(--course-text-on-deep); /* Egret (rule 1) */ /* Gold is decorative/non-text ONLY in v0.3.56 (brand guide gold-as-rules-and-accents). Primary buttons moved to Arabian Spice (owner's call); see --course-button-* in the palette contract. */ --ppfb-10k-gold-300: #e8c95a; /* (inert T0) highlight/shimmer on dark */ --ppfb-10k-gold-500: var(--course-gold-accent); /* decorative fills/rules */ --ppfb-10k-gold-600: #a8871c; /* (inert T0) legacy button hover */ --ppfb-10k-gold-700: var(--course-focus-ring); /* RETARGETED: focus outlines only */ --ppfb-10k-gold-flare: #fcb514; /* (inert T0) celebratory accents only */ /* Verdicts: light fields ONLY (contract rules). */ --ppfb-10k-pass: var(--course-text-success); /* 6.02:1 on Egret */ --ppfb-10k-success: var(--course-text-success); /* 6.02:1 on Egret */ --ppfb-10k-success-deep: #145c26; /* (inert T0) pass on tint */ --ppfb-10k-success-wash: #e7f2ea; /* (inert T0) pass banner tint */ --ppfb-10k-fail: var(--course-text-error); /* 5.01:1 on Egret */ --ppfb-10k-fail-deep: #7f1f28; /* (inert T0) fail on tint */ --ppfb-10k-fail-wash: #f9e9eb; /* (inert T0) fail banner tint */ /* Focus rings (never removed, never hover-only) */ --ppfb-10k-focus-paper: var(--course-focus-ring); --ppfb-10k-focus-charcoal: var(--course-focus-ring-on-deep); /* Overlays: Kiln Ink / Egret rgb components (no hex literals) */ --ppfb-10k-scrim: rgba(34, 26, 18, 0.72); --ppfb-10k-stickybar-bg: rgba(243, 236, 224, 0.92); /* dormant bar (constant-off) */ --ppfb-10k-hover-wash: rgba(34, 26, 18, 0.04); /* chrome-dash hover */ /* Progress: ginger track, Kiln Ink fill (7.52:1, contract-measured). Bronze-on-ginger is 2.57:1 and spice-on-ginger 2.20:1 (both fail WCAG 1.4.11); Kiln Ink is the palette's on-tint ink. */ --ppfb-10k-track-bg: var(--course-candied-ginger); --ppfb-10k-track-h: 3px; /* T2: → 8px (presence) */ --ppfb-10k-progress-fill: var(--course-text-primary); --ppfb-10k-progress-fill-dark: #c9a227; /* (inert T0) fill on charcoal */ /* ============ BORDER WIDTHS ============ */ --ppfb-10k-border-1: 1px; --ppfb-10k-border-2: 2px; --ppfb-10k-border-3: 3px; /* ============ RADIUS (T0: current values; T2 moves to scale) ============ */ --ppfb-10k-radius-xs: 2px; /* focus ring on scope */ --ppfb-10k-radius-btn: 6px; /* buttons, inputs (current) */ --ppfb-10k-radius-card: 8px; /* cards (current; T2: → 14px) */ --ppfb-10k-radius-logo: 11px; /* chrome badge (current) */ --ppfb-10k-radius-logo-sm: 9px; /* chrome badge ≤480px (current) */ --ppfb-10k-radius-panel: 10px; /* quiz result panel (current) */ --ppfb-10k-radius-round: 50%; /* play overlay disc */ --ppfb-10k-radius-pill: 999px; /* pills, tracks, badges */ --ppfb-10k-radius-sm: 6px; /* (inert T0) canonical scale */ --ppfb-10k-radius-md: 10px; /* (inert T0) canonical scale */ --ppfb-10k-radius-lg: 14px; /* (inert T0) canonical scale */ --ppfb-10k-radius-xl: 20px; /* (inert T0) canonical scale */ /* ============ ELEVATION (inert T0: the current system has none) ============ */ --ppfb-10k-shadow-1: 0 1px 2px rgba(23, 25, 28, 0.06); --ppfb-10k-shadow-2: 0 4px 16px rgba(23, 25, 28, 0.08); --ppfb-10k-shadow-3: 0 12px 40px rgba(23, 25, 28, 0.14); --ppfb-10k-shadow-gold: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 8px 24px rgba(201, 162, 39, 0.18); /* ============ MOTION ============ */ --ppfb-10k-dur-150: 0.15s; /* current micro-transitions */ --ppfb-10k-dur-instant: 120ms; /* (inert T0) micro feedback */ --ppfb-10k-dur-quick: 180ms; /* (inert T0) hovers, fades */ --ppfb-10k-dur-base: 280ms; /* (inert T0) panel reveals */ --ppfb-10k-dur-slow: 480ms; /* (inert T0) ceremony windows */ --ppfb-10k-ease: ease; /* current easing (kept verbatim in T0) */ --ppfb-10k-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* (inert T0) */ --ppfb-10k-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);/* (inert T0) */ --ppfb-10k-ease-celebrate: cubic-bezier(0.34, 1.3, 0.64, 1); /* (inert T0) */ /* ============ SIZES ============ */ --ppfb-10k-tap-min: 44px; /* iOS tap-target floor */ --ppfb-10k-measure: 680px; /* reading measure */ --ppfb-10k-size-34: 34px; /* chrome badge ≤480px */ --ppfb-10k-size-40: 40px; /* chrome badge */ --ppfb-10k-size-48: 48px; /* tool thumb ≤480px */ --ppfb-10k-size-52: 52px; /* stickybar min-height (dormant) */ --ppfb-10k-size-56: 56px; /* tool thumb; lesson-row min-height */ --ppfb-10k-size-64: 64px; /* play overlay ≤480px */ --ppfb-10k-size-72: 72px; /* play overlay min */ --ppfb-10k-size-88: 88px; /* play overlay */ --ppfb-10k-play-w: 26px; /* play glyph */ --ppfb-10k-play-h: 16px; --ppfb-10k-play-offset: 8px; --ppfb-10k-play-w-sm: 19px; /* play glyph ≤480px */ --ppfb-10k-play-h-sm: 12px; --ppfb-10k-play-offset-sm: 6px; /* ============ OUTLINE OFFSETS ============ */ --ppfb-10k-outline-offset: 2px; --ppfb-10k-outline-offset-lg: 4px; /* ============ Z-INDEX ============ */ --ppfb-10k-z-fallback: 2; /* video fallback card */ --ppfb-10k-z-play: 3; /* play overlay */ --ppfb-10k-z-sticky: 100; /* stickybar (dormant) */ --ppfb-10k-z-skip: 200; /* skip link */ /* ============ COMPONENT STARTERS (values current; T2 rebuilds) ============ */ /* v0.3.56 (seat I): button starters alias the Fall 2026 primary-button treatment (owner's call 2026-09-19: Princess Blue leads, white text; supersedes the earlier Arabian Spice call). */ --ppfb-10k-btn-primary-bg: var(--course-button-bg); --ppfb-10k-btn-primary-ink: var(--course-button-text); --ppfb-10k-btn-primary-hover: var(--course-button-bg-hover); --ppfb-10k-btn-primary-height: 54px; /* (inert T0) iOS primary-submit min */ --ppfb-10k-btn-quiet-ink: var(--course-text-primary); --ppfb-10k-input-min-height: 54px; /* (inert T0) touch-sized fields */ --ppfb-10k-input-font-size: 16px; /* (inert T0) iOS zoom floor: NEVER lower */ --ppfb-10k-card-padding: 1.25rem; --ppfb-10k-card-padding-lg: 1.75rem; /* (inert T0) ≥768px */ } /* NOTE: the prefers-reduced-motion guard (C21) is carried VERBATIM in the aliased component stylesheet, not here; relocating it in T0 would change which surfaces it covers. T2 scopes it alongside the tokens. */