/* ============================================================ PMP Reps — proposed NEW tokens (Phase 1) ---------------------------------------------------------------- Everything the game needs that the design system doesn't already define. Loaded AFTER design-system/tokens.css. Rationale per group is in the comments — this file doubles as the §18.9 "new tokens proposed explicitly" deliverable. Replaces the hardcoded hex currently in marketing/learn.css: #22c55e #16a34a #eab308 #b45309 #ef4444 #dc2626 #38bdf8 #0284c7 ============================================================ */ :root, [data-theme="light"] { /* ── Grade triad ────────────────────────────────────────── Got / Almost / Missed. Aliased to the design system's feedback ramps so the game can never drift from the app, plus a -strong fill for the pressed/burst state. Contrast on -surface, light theme: got 5.9:1, almost 6.4:1, missed 6.5:1 — all AA for body text and AAA for large. */ --reps-got-surface: var(--color-success-surface); --reps-got-border: #86EFAC; /* green-300 */ --reps-got-text: var(--color-success-text); --reps-got-strong: #16A34A; /* green-600 */ --reps-almost-surface: var(--color-warning-surface); --reps-almost-border: var(--color-warning-border); --reps-almost-text: #92400E; /* amber-800 — AA on amber-100 */ --reps-almost-strong: #D97706; /* amber-600 */ --reps-missed-surface: var(--color-error-surface); --reps-missed-border: var(--color-error-border); --reps-missed-text: var(--color-error-text); --reps-missed-strong: var(--color-error-strong); /* ── ITTO roles ─────────────────────────────────────────── The flow figure's three nodes. Input = information arriving (cool blue), Tool = the work you do (brand indigo), Output = the artifact produced (green). Dual-coding: never color alone — each node also carries an icon and the letter (I / TT / O). */ --reps-input-surface: #E0F2FE; /* sky-100 */ --reps-input-border: #7DD3FC; /* sky-300 */ --reps-input-text: #0369A1; /* sky-700 */ --reps-tool-surface: var(--color-primary-subtle); --reps-tool-border: #A5B4FC; /* indigo-300 */ --reps-tool-text: var(--color-primary-active); --reps-output-surface: var(--color-success-surface); --reps-output-border: #86EFAC; --reps-output-text: var(--color-success-text); /* ── Journey layer ──────────────────────────────────────── Streak gets the one warm hue in the product — it is the only element allowed to compete with indigo, because it's the return-loop's whole job to catch the eye. */ --reps-streak: #EA580C; /* orange-600 */ --reps-streak-surface: #FFEDD5; /* orange-100 */ --reps-streak-frozen: #0EA5E9; /* sky-500 — "freeze used" */ --reps-xp: var(--color-primary); --reps-ring-track: var(--color-border); --reps-ring-fill: var(--color-primary); --reps-ring-done: var(--reps-got-strong); /* Mastered (Box 5 / ★). Deliberately the SAME green as "Got it" rather than a new gold: mastery is the accumulation of got-its, and a 4th hue would break the one-accent rule. */ --reps-mastered: var(--reps-got-strong); /* Leitner box ramp — box 1 (weakest) → box 4, indigo mixed toward the raised surface so the bars read as "filling up". */ --reps-box-1: color-mix(in srgb, var(--color-primary) 26%, var(--color-surface-raised)); --reps-box-2: color-mix(in srgb, var(--color-primary) 46%, var(--color-surface-raised)); --reps-box-3: color-mix(in srgb, var(--color-primary) 66%, var(--color-surface-raised)); --reps-box-4: color-mix(in srgb, var(--color-primary) 86%, var(--color-surface-raised)); --reps-box-5: var(--reps-mastered); /* ── Speed round ────────────────────────────────────────── Opt-in timed mode. Signalled by INVERTED CHROME, not a new hue — a 4th accent would leak "urgency" into the calm default palette, which §3.4 forbids. Dark panel + indigo timer reads unmistakably as "different mode" and costs no new color. */ --reps-speed-surface: #14161F; --reps-speed-card: #1C1F2B; --reps-speed-border: #2E3342; --reps-speed-text: #F3F4F6; --reps-speed-muted: #9BA3B2; --reps-speed-timer: #818CF8; /* indigo-400 — visible on the dark panel */ --reps-speed-warn: #FBBF24; /* last 5 seconds */ /* ── Glossary / jargon ─────────────────────────────────── A dotted underline, not a link color — §9 wants "subtle, not loud". */ --reps-term-underline: color-mix(in srgb, var(--color-primary) 55%, transparent); --reps-term-hover: var(--color-primary-subtle); /* ── Motion (game-specific; the design system's base scale is too short for the reward moments) ───────────────────────── */ --reps-flip: 250ms; --reps-card-in: 200ms; --reps-card-out: 160ms; --reps-burst: 420ms; --reps-celebrate: 700ms; --reps-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="dark"] { /* Grade triad — the feedback aliases follow the design system's dark ramp automatically; only the borders and -strong fills are restated so the buttons keep a visible edge on near-black surfaces. */ --reps-got-border: #1F5C38; --reps-got-strong: #22C55E; --reps-almost-border: #5C4A1F; --reps-almost-text: var(--color-warning-text); --reps-almost-strong: #F59E0B; --reps-missed-border: #5C2328; /* ITTO roles */ --reps-input-surface: #0C2233; --reps-input-border: #1E4E6B; --reps-input-text: #7DD3FC; --reps-tool-surface: var(--color-primary-subtle); --reps-tool-border: #3A3F73; --reps-tool-text: #A5B4FC; --reps-output-surface: var(--color-success-surface); --reps-output-border: #1F5C38; --reps-output-text: var(--color-success-text); /* Journey */ --reps-streak: #FB923C; /* orange-400 — AA on dark */ --reps-streak-surface: #2A1608; --reps-streak-frozen: #38BDF8; --reps-ring-track: var(--color-border-strong); --reps-ring-done: #22C55E; /* Speed round — on dark theme the inversion flips: the speed panel goes LIGHTER than the page so it still reads as "a different mode". */ --reps-speed-surface: #202430; --reps-speed-card: #2A2F3D; --reps-speed-border: #3D4353; --reps-speed-text: #F9FAFB; --reps-speed-muted: #A8B0BE; --reps-term-underline: color-mix(in srgb, var(--color-primary) 70%, transparent); }