/* PokeTrack.io design tokens (visual overhaul T1, brief docs/agent-company/drafts/2026-10-01-visual-overhaul-brief.md section b). One file, linked by app/layout.tsx and by the SPA , so nothing is declared twice. The --pt- prefix is needed because marketing.css and set-pages.css already declare :root tokens with other values. Nick's decisions of 2026-10-01 override the brief where they differ: - Up is GREEN, down is RED (not blue/orange). Red is also the error colour, so a move must always carry its sign, an up/down arrow icon and the number. Colour is never the only cue. The deutan delta E rows below show why. - Era tints stay (Q3 -> b). They are NOT retired: nothing here replaces them, and a later task fixes their contrast only. This task defines tokens only; nothing reads them yet except the legacy aliases at the bottom. With the self-hosted fonts that ship alongside (T2): colours and computed properties identical; deliberate rendering changes: Inter 800/900 -> 700 (SPA, 28 rules), JetBrains Mono 400/700 -> 500 everywhere, Inter italic 300 -> synthesized oblique (/privacy, /terms, /t/[slug], /new-to-pokemon). Rules that go with the ramp: - Text on fills: --pt-tx on the weak, mid, flat and neutral fills (--pt-tx2 only where a pass row allows it, never on a mid step), --pt-bg (#060608) on the strong steps; never --pt-tx3 (see the NOT USED rows). - Heat-map and tile fills sit apart by a 2px gap or a --pt-bd hairline. The weak steps are only 1.7:1 against the card, so two neighbouring tiles must never touch. CONTRAST TABLE (WCAG 2.x relative luminance, measured from the values below by scripts/harness/overhaul-foundation/contrast.cjs --md; rerun it after any colour change). Floors: 4.5:1 text (AA), 3:1 non-text (1.4.11), "info" = decorative, no floor. The up/down steps are matched in CIE L*: weak 24, mid 40, strong 62. Chroma is measured, not matched (C* in the lightness rows below). foreground on ratio floor result / use --pt-tx #f0ede8 --pt-bg #060608 17.34:1 4.5:1 pass - text --pt-tx #f0ede8 --pt-bg2 #0a0a10 16.91:1 4.5:1 pass - text --pt-tx #f0ede8 --pt-bg3 #14141c 15.68:1 4.5:1 pass - text --pt-tx #f0ede8 --pt-bg4 #1f1f29 13.98:1 4.5:1 pass - text --pt-tx2 #aba9a7 --pt-bg #060608 8.64:1 4.5:1 pass - text --pt-tx2 #aba9a7 --pt-bg2 #0a0a10 8.43:1 4.5:1 pass - text --pt-tx2 #aba9a7 --pt-bg3 #14141c 7.82:1 4.5:1 pass - text --pt-tx2 #aba9a7 --pt-bg4 #1f1f29 6.97:1 4.5:1 pass - text --pt-tx3 #898787 --pt-bg #060608 5.67:1 4.5:1 pass - text --pt-tx3 #898787 --pt-bg2 #0a0a10 5.53:1 4.5:1 pass - text --pt-tx3 #898787 --pt-bg3 #14141c 5.13:1 4.5:1 pass - text --pt-tx3 #898787 --pt-bg4 #1f1f29 4.57:1 4.5:1 pass - text --pt-gold #fbbf24 --pt-bg #060608 12.13:1 4.5:1 pass - text --pt-gold #fbbf24 --pt-bg2 #0a0a10 11.83:1 4.5:1 pass - text --pt-gold #fbbf24 --pt-bg3 #14141c 10.97:1 4.5:1 pass - text --pt-gold #fbbf24 --pt-bg4 #1f1f29 9.78:1 4.5:1 pass - text --pt-gold2 #fcd34d --pt-bg #060608 14.04:1 4.5:1 pass - text --pt-gold2 #fcd34d --pt-bg2 #0a0a10 13.69:1 4.5:1 pass - text --pt-gold2 #fcd34d --pt-bg3 #14141c 12.70:1 4.5:1 pass - text --pt-gold2 #fcd34d --pt-bg4 #1f1f29 11.32:1 4.5:1 pass - text --pt-green #34d399 --pt-bg #060608 10.53:1 4.5:1 pass - text --pt-green #34d399 --pt-bg2 #0a0a10 10.27:1 4.5:1 pass - text --pt-green #34d399 --pt-bg3 #14141c 9.53:1 4.5:1 pass - text --pt-green #34d399 --pt-bg4 #1f1f29 8.49:1 4.5:1 pass - text --pt-red #f5415f --pt-bg #060608 5.60:1 4.5:1 pass - text --pt-red #f5415f --pt-bg2 #0a0a10 5.46:1 4.5:1 pass - text --pt-red #f5415f --pt-bg3 #14141c 5.06:1 4.5:1 pass - text --pt-red #f5415f --pt-bg4 #1f1f29 4.51:1 4.5:1 pass - text --pt-link #6ea3e6 --pt-bg #060608 7.76:1 4.5:1 pass - text --pt-link #6ea3e6 --pt-bg2 #0a0a10 7.56:1 4.5:1 pass - text --pt-link #6ea3e6 --pt-bg3 #14141c 7.02:1 4.5:1 pass - text --pt-link #6ea3e6 --pt-bg4 #1f1f29 6.25:1 4.5:1 pass - text --pt-ac #00c48c --pt-bg #060608 8.94:1 4.5:1 pass - text --pt-ac #00c48c --pt-bg2 #0a0a10 8.72:1 4.5:1 pass - text --pt-ac #00c48c --pt-bg3 #14141c 8.09:1 4.5:1 pass - text --pt-ac #00c48c --pt-bg4 #1f1f29 7.21:1 4.5:1 pass - text --pt-blue #3a7fd4 --pt-bg #060608 4.98:1 3:1 pass - chart line / non-text --pt-blue #3a7fd4 --pt-bg2 #0a0a10 4.86:1 3:1 pass - chart line / non-text --pt-blue #3a7fd4 --pt-bg3 #14141c 4.51:1 3:1 pass - chart line / non-text --pt-bd-field #6a6a76 --pt-bg2 #0a0a10 3.70:1 3:1 pass - field boundary (1.4.11) --pt-bd-field #6a6a76 --pt-bg3 #14141c 3.43:1 3:1 pass - field boundary (1.4.11) --pt-bd #20202c --pt-bg #060608 1.26:1 1:1 info - hairline, decorative (carries no meaning) --pt-bd #20202c --pt-bg2 #0a0a10 1.23:1 1:1 info - hairline, decorative (carries no meaning) --pt-focus #f0ede8 --pt-bg #060608 17.34:1 3:1 pass - focus ring (1.4.11) --pt-focus #f0ede8 --pt-bg2 #0a0a10 16.91:1 3:1 pass - focus ring (1.4.11) --pt-focus #f0ede8 --pt-bg3 #14141c 15.68:1 3:1 pass - focus ring (1.4.11) --pt-focus #f0ede8 --pt-bg4 #1f1f29 13.98:1 3:1 pass - focus ring (1.4.11) --pt-gold #fbbf24 --pt-bg2 #0a0a10 11.83:1 3:1 pass - gold selection bar (non-text) --pt-gold #fbbf24 --pt-bg3 #14141c 10.97:1 3:1 pass - gold selection bar (non-text) --pt-bg #060608 --pt-ac #00c48c 8.94:1 4.5:1 pass - text #060608 on fill --pt-bg #060608 --pt-ac2 #00a878 6.63:1 4.5:1 pass - text #060608 on fill --pt-bg #060608 --pt-gold #fbbf24 12.13:1 4.5:1 pass - text #060608 on fill --pt-bg #060608 --pt-gold2 #fcd34d 14.04:1 4.5:1 pass - text #060608 on fill --pt-bg #060608 --pt-green #34d399 10.53:1 4.5:1 pass - text #060608 on fill --pt-bg #060608 --pt-up-strong #03ab78 6.84:1 4.5:1 pass - text #060608 on fill --pt-bg #060608 --pt-down-strong #ef6c77 6.83:1 4.5:1 pass - text #060608 on fill --pt-tx #f0ede8 --pt-up-weak #0c412d 9.94:1 4.5:1 pass - cream text on fill --pt-tx #f0ede8 --pt-up-mid #026c4a 5.54:1 4.5:1 pass - cream text on fill --pt-tx #f0ede8 --pt-down-weak #5b2a2e 9.91:1 4.5:1 pass - cream text on fill --pt-tx #f0ede8 --pt-down-mid #97444b 5.54:1 4.5:1 pass - cream text on fill --pt-tx #f0ede8 --pt-neutral #1f1f29 13.98:1 4.5:1 pass - cream text on fill #ffffff --pt-red-fill #e11d48 4.70:1 4.5:1 pass - white text on the error fill --pt-tx #f0ede8 --pt-red-fill #e11d48 4.02:1 4.5:1 fail (not used for this) - NOT USED: cream text on the error fill (use white) --pt-tx2 #aba9a7 --pt-up-weak #0c412d 4.95:1 4.5:1 pass - secondary text on fill --pt-tx2 #aba9a7 --pt-up-mid #026c4a 2.76:1 4.5:1 fail (not used for this) - NOT USED: secondary text on a mid step (use tx) --pt-tx2 #aba9a7 --pt-down-weak #5b2a2e 4.94:1 4.5:1 pass - secondary text on fill --pt-tx2 #aba9a7 --pt-down-mid #97444b 2.76:1 4.5:1 fail (not used for this) - NOT USED: secondary text on a mid step (use tx) --pt-tx2 #aba9a7 --pt-neutral #1f1f29 6.97:1 4.5:1 pass - secondary text on fill --pt-tx3 #898787 --pt-up-weak #0c412d 3.25:1 4.5:1 fail (not used for this) - NOT USED: tertiary text on a weak step (use tx or tx2) --pt-tx3 #898787 --pt-down-weak #5b2a2e 3.24:1 4.5:1 fail (not used for this) - NOT USED: tertiary text on a weak step (use tx or tx2) --pt-bg #060608 --pt-up-mid #026c4a 3.13:1 4.5:1 fail (not used for this) - NOT USED: dark text on a mid step --pt-bg #060608 --pt-down-mid #97444b 3.13:1 4.5:1 fail (not used for this) - NOT USED: dark text on a mid step --pt-tx #f0ede8 --pt-up-strong #03ab78 2.53:1 4.5:1 fail (not used for this) - NOT USED: cream text on a strong step --pt-tx #f0ede8 --pt-down-strong #ef6c77 2.54:1 4.5:1 fail (not used for this) - NOT USED: cream text on a strong step --pt-up-weak #0c412d --pt-bg2 #0a0a10 1.70:1 1:1 info - tile fill against card surface (informational) --pt-up-mid #026c4a --pt-bg2 #0a0a10 3.05:1 1:1 info - tile fill against card surface (informational) --pt-up-strong #03ab78 --pt-bg2 #0a0a10 6.67:1 1:1 info - tile fill against card surface (informational) --pt-down-weak #5b2a2e --pt-bg2 #0a0a10 1.71:1 1:1 info - tile fill against card surface (informational) --pt-down-mid #97444b --pt-bg2 #0a0a10 3.05:1 1:1 info - tile fill against card surface (informational) --pt-down-strong #ef6c77 --pt-bg2 #0a0a10 6.66:1 1:1 info - tile fill against card surface (informational) --pt-neutral #1f1f29 --pt-bg2 #0a0a10 1.21:1 1:1 info - tile fill against card surface (informational) Lightness match (CIE L*), chroma (CIE C*ab, measured, not matched by rule), up vs down, and deuteranopia-simulated delta E: weak up #0c412d L*=23.8 C*=23.9 down #5b2a2e L*=23.9 C*=24.2 |dL*|=0.10 |dC*|=0.4 deutan dE=5.4 mid up #026c4a L*=40.0 C*=37.4 down #97444b L*=40.0 C*=37.7 |dL*|=0.02 |dC*|=0.3 deutan dE=8.5 strong up #03ab78 L*=62.1 C*=52.0 down #ef6c77 L*=62.0 C*=54.8 |dL*|=0.08 |dC*|=2.8 deutan dE=13.4 neutral #1f1f29 L*=12.2 all required pairs pass */ :root { /* ---- Surface ---- */ --pt-bg: #060608; /* page */ --pt-bg2: #0a0a10; /* card */ --pt-bg3: #14141c; /* control, hover, track */ --pt-bg4: #1f1f29; /* menu, popover */ --pt-bd: #20202c; /* hairline (decorative) */ --pt-bd-field: #6a6a76; /* field boundary, 3.7:1 on bg2 */ /* ---- Text: solid hex tinted from cream, never grey and never alpha (canon P5) ---- */ --pt-tx: #f0ede8; --pt-tx2: #aba9a7; /* 7.8:1 on bg3 */ --pt-tx3: #898787; /* 5.1:1 on bg3 */ --pt-price: var(--pt-tx); /* prices are plain text; the source is printed as text beside them */ /* ---- Roles: one colour per role ---- */ --pt-ac: #00C48C; /* the one primary action per screen; #060608 text on it */ --pt-ac2: #00a878; /* primary hover */ --pt-gold: #fbbf24; /* yours, selected, Pro */ --pt-gold2: #fcd34d; /* gold highlight */ --pt-green: #34d399; /* owned, complete, success; also the "up" text colour */ --pt-red: #f5415f; /* error, destructive; also the "down" text colour. The brief's #f43f5e nudged to clear AA on bg4 (Nick 2026-10-01) */ --pt-red-fill: #e11d48; /* solid red fills; white text (4.7:1), not cream (4.0:1) */ --pt-blue: #3a7fd4; /* charts, non-text */ --pt-link: #6ea3e6; /* links */ --pt-focus: #f0ede8; /* focus ring colour */ --pt-focus-width: 3px; --pt-focus-offset: 2px; /* ---- Up / down (Nick 2026-10-01: green up, red down) ---- Seven steps for fills such as the heat map: down strong / mid / weak, neutral, up weak / mid / strong. Cream text on the weak and mid steps, #060608 on the strong ones. Text on a plain surface uses --pt-up / --pt-down. */ --pt-up: var(--pt-green); --pt-down: var(--pt-red); --pt-up-weak: #0c412d; --pt-up-mid: #026c4a; --pt-up-strong: #03ab78; --pt-down-weak: #5b2a2e; --pt-down-mid: #97444b; --pt-down-strong: #ef6c77; --pt-neutral: #1f1f29; /* "no signal": thin or eBay-only data, shown as an em dash */ /* ---- Fonts: three families, one job each (self-hosted, see /fonts/fonts.css) ---- */ --pt-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* UI and body, 300-700 */ --pt-font-display: 'Bebas Neue', 'Bebas Fallback', sans-serif; /* wordmark, marketing display, hero figures; weight 400 only */ --pt-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* prices, stats, counts, card numbers; never sentences */ /* ---- Type scale (px). Nothing that carries meaning goes below 11. ---- */ --pt-fs-11: 11px; /* labels: 600 at .06em */ --pt-fs-13: 13px; --pt-fs-15: 15px; /* app body */ --pt-fs-16: 16px; /* marketing body and inputs */ --pt-fs-18: 18px; --pt-fs-20: 20px; /* h2, 600 */ --pt-fs-24: 24px; /* app h1, 600 */ --pt-fs-d32: 32px; /* Bebas: hero figures, marketing h2 (32 / 48) */ --pt-fs-d48: 48px; /* Bebas: hero figures, marketing h2 (32 / 48) and h1 (48 / 64) */ --pt-fs-d64: 64px; /* Bebas: marketing h1 */ --pt-lh-body: 1.5; --pt-lh-title: 1.25; /* Inter titles */ --pt-lh-display: 1; /* Bebas */ --pt-fw-light: 300; --pt-fw-regular: 400; --pt-fw-medium: 500; --pt-fw-semibold: 600; --pt-fw-bold: 700; --pt-ls-label: .06em; /* ---- Spacing: 4 8 12 16 24 32 48 64 ---- */ --pt-sp-1: 4px; --pt-sp-2: 8px; --pt-sp-3: 12px; --pt-sp-4: 16px; --pt-sp-5: 24px; --pt-sp-6: 32px; --pt-sp-7: 48px; --pt-sp-8: 64px; --pt-gutter: 16px; /* phone */ --pt-gutter-lg: 32px; /* desktop */ --pt-content-max: 1200px; --pt-prose-max: 72ch; /* ---- Radius ---- */ --pt-r-sm: 6px; --pt-r-md: 8px; --pt-r-lg: 14px; --pt-r-pill: 999px; /* ---- Elevation: a step up the surface ramp plus a hairline. Only overlays get a shadow. ---- */ --pt-shadow-overlay: 0 12px 32px rgba(0, 0, 0, .5); /* ---- Motion: 150 / 200 / 250 ms, state-triggered only, instant under reduced motion ---- */ --pt-dur-1: 150ms; --pt-dur-2: 200ms; --pt-dur-3: 250ms; --pt-ease: cubic-bezier(.2, .8, .2, 1); /* ---- Z scale ---- */ --pt-z-nav: 9000; --pt-z-banner: 9500; --pt-z-dialog: 11000; --pt-z-toast: 11500; /* ---- Breakpoints. Custom properties can't be used inside @media, so these are the reference values (and for JS to read): 320 / 390 phone, 768 tablet, 1024 sidebar, 1440 wide. ---- */ --pt-bp-phone: 390px; --pt-bp-tablet: 768px; --pt-bp-sidebar: 1024px; --pt-bp-wide: 1440px; } @media (prefers-reduced-motion: reduce) { :root { --pt-dur-1: 0ms; --pt-dur-2: 0ms; --pt-dur-3: 0ms; } } /* ---- Legacy aliases (until T17 removes them) ---- Only names that are already declared today, with exactly this value, in a stylesheet that loads alongside this one: the SPA's inline :root, marketing.css, set-pages.css. Where a page or sheet loaded after this file declares the name itself, that declaration still wins, so each alias is a no-op today and the pages look the same. --bg3 is aliased: every reader declares it itself (the SPA :root, the .v3 wrapper that /login and /auth/reset use, the inline :root of /u/[username]). Left out on purpose: --text (Next pages read it without declaring it, so defining it here would restyle them); --tx/--tx2/--tx3/--bd (v3.module.css scopes them on .v3, and affiliate/accept reads --tx2 with a fallback, so a :root value would change it); --red (--pt-red is #f5415f since the 2026-10-01 nudge, while the SPA's live --red stays #f43f5e until its follow-up, so the alias would no longer carry the declared value); the rgba text and border tokens (--text2, --text3, --border, --border2: alpha, retired); --purple and --yellow (retired); and the font names. */ :root { --bg: var(--pt-bg); --bg2: var(--pt-bg2); --bg3: var(--pt-bg3); --bg4: var(--pt-bg4); --bg-1: var(--pt-bg2); /* set-pages.css */ --black: var(--pt-bg); /* marketing.css, set-pages.css */ --white: var(--pt-tx); /* marketing.css, set-pages.css */ --text1: var(--pt-tx); /* SPA */ --gold: var(--pt-gold); --gold2: var(--pt-gold2); --gold-2: var(--pt-gold2); /* set-pages.css */ --green: var(--pt-green); /* set-pages.css redeclares #30c870, but marketing.css loads after it with #34d399 and wins on the Next pages */ --red-fill: var(--pt-red-fill); /* SPA */ --blue: var(--pt-blue); --blue-tx: var(--pt-link); /* SPA */ --ac: var(--pt-ac); --bd-field: var(--pt-bd-field); /* SPA */ --focus: var(--pt-focus); /* SPA */ }