/* ============================================================================ tokens.css — Finance AI Competency Assessment PROVISIONAL token lock (2026-07-20), reconciled from the resolved prototype (prototype-finalists.html, design "D · Editorial", Option A warmer graphics). Build the static site against these. The Claude Design pass later edits VALUES here (a re-skin) — do not change component structure to accommodate it. Theme: default is light; :root[data-theme="dark"] overrides. Match the viewer toggle by stamping data-theme on . ============================================================================ */ :root { /* ---- color (light: warm paper, claret fields) ---- */ --bg: #F3EEE6; /* warm paper */ --surface: #FBF8F2; /* raised card */ --ink: #201A17; /* text (~13:1 on bg) */ --muted: #5F5349; /* captions (~5.6:1) */ --line: #DAD0C2; /* hairline */ --accent: #6E1E28; /* claret (~7:1; white text ~7:1) */ --data-current: #6E1E28; /* radar polygon: 18% fill + 2px stroke */ --data-benchmark:#33465A; /* ink-navy, dashed, no fill (FK view only) */ --good: #2E5D45; /* forest */ --warn: #B7791F; /* ochre */ --on-accent: #FFFFFF; /* text/icons on a claret field */ /* Results/explainer surfaces (Claude Design dashboard pass, 2026-07-26). A third, lighter ink step and two chart greys the earlier palette had no name for. */ --muted-3: #A2988D; /* third ink step: captions under captions, ring labels */ --faint-x: #C3B6A6; /* the ✗ on a missed answer — present, not alarming */ --grid-line: #E2D8CA; /* radar web + axis rules; one step lighter than --line */ --track-bg: #EDE5DA; /* unfilled part of a pillar bar */ --bar-bg: rgba(243,238,230,.88); /* sticky header, over --bg */ --ring-outer: #EFE7DC; /* hero art backdrop discs */ --ring-inner: #E7DAD4; /* Ordinal level ramps (radar Chunk 1 color-coding, 2026-07-27). One hue per ramp, low->high tier, validated with the dataviz skill's validate_palette.js --ordinal check plus a WCAG 4.5:1 text-contrast floor (both stricter than the skill's own 2:1 ordinal floor, since these render as small text, not chart marks). --lvl-* colors the 4-tier FK/AI-Assisted ring labels on the radar (same 4 slots serve either ladder — Developing..Mastery or Rudimentary..Architect/Builder — since both are a low->high 4-step scale); --aif-lvl-* is AI Fluency's own 3-tier scale (Aware/Proficient/Expert), kept a separate hue because AIF has no radar spoke to inherit a color from. The *-fill-* steps are for the inverted (figure/ground-swapped) domain-card badges — in light mode the fill IS the text-ramp color (dark-on-light already reads as a fill); in dark mode the text-ramp colors are necessarily pale (that's what makes them legible AS TEXT on a near-black surface) so they cannot double as badge fills against that same surface — the *-fill-* dark steps are a separate, darker set of the same hue chosen so white badge text clears 4.5:1. */ --lvl-1: #ac565c; --lvl-2: #97444a; --lvl-3: #823139; --lvl-4: #6e1e28; --lvl-fill-1: #ac565c; --lvl-fill-2: #97444a; --lvl-fill-3: #823139; --lvl-fill-4: #6e1e28; --aif-lvl-1: #576b81; --aif-lvl-2: #45586d; --aif-lvl-3: #33465a; --aif-fill-1: #576b81; --aif-fill-2: #45586d; --aif-fill-3: #33465a; --lvl-badge-ink: #FFFFFF; /* badge text on any *-fill-* step, both themes */ /* ---- type ---- */ --font-display: 'Fraunces', Georgia, serif; /* opsz+SOFT+WONK; wght 500–900 */ --font-body: 'Newsreader', Georgia, serif; /* 400/500 + italic */ --font-ui: 'Space Grotesk', system-ui, sans-serif; /* labels, uppercase, tabular nums */ --fs-h1: clamp(44px, 5vw, 72px); /* Fraunces 600–900 */ --fs-h2: 40px; /* Fraunces 500 */ /* Sizes raised one step 2026-07-24 for legibility (Hou Fu, Day-7 call: "make everything bigger"). Previous values kept inline. */ --fs-h3: 28px; /* was 26 — Fraunces 500 (stem "headline question") */ --fs-body: 19px; /* was 18 — Newsreader 400 */ --fs-small: 16px; /* was 15 */ --fs-label: 13px; /* was 12 — Space Grotesk caps, tracking +0.08em */ --fs-question: 15px; /* clause text, option rows, field labels (was 13.5) */ /* Ported 2026-07-25 from the worktree-bank-repoint-and-widgets branch's interaction-lab.html tuning pass (that file/branch is not present here — these are just the resulting token values). Stem read "too much real estate" per Ashley's note; answer-option text moved off --font-ui to a calmer face at a smaller size. */ --fs-stem: 17px; /* question headline; was 23px (via --fs-h3 28px/600) until this pass */ --fw-stem: 400; /* question headline weight; was 600 (semibold) */ --font-option: 'Space Grotesk', system-ui, sans-serif; /* answer-option text only */ --fs-option: 12px; /* answer-BUTTON text specifically, not the row question label above it */ --lh-display: 1.03; --lh-body: 1.6; --tracking-display: -0.01em; --tracking-label: 0.1em; /* was 0.08em — same ported pass */ /* ---- spacing / shape / elevation / motion ---- */ --space-unit: 8px; /* 4px sub-step */ --radius-card: 6px; --radius-pill: 999px; --border-hairline: 1px; --shadow-faint: 0 1px 2px rgba(32,26,23,.06); --motion-fast: 200ms; --motion-reveal: 700ms cubic-bezier(.2,.8,.2,1); /* radar spring; respect prefers-reduced-motion */ /* ---- graphics layer (Option A warmer) ---- */ --chip-bg: var(--accent); --chip-ink: var(--on-accent); /* icons are WHITE on the claret chip */ --chip-radius: 12px; --gfx-faint-opacity: 0.13; /* faint background graphics (question prompt, cards) */ --gfx-line-width: 3; /* faint bg-graphic stroke width */ --illus-stroke: var(--ink); /* filled illustration outlines follow ink */ --illus-fill-neutral: var(--surface); --illus-fill-accent: var(--accent); /* ---- intake screen (welcome-lab pass, 2026-07-25) ---- Scoped to .intake — the global --fs-h1/--fs-body etc. above are shared with the results masthead and must not change; the intake screen reads smaller and denser. */ --intake-fs-h1: 35px; /* was 32 */ --intake-fw-h1: 700; --intake-fs-dek: 16px; /* was 18 */ --intake-fs-body: 14px; /* was 16 */ --intake-fs-pcname: 14px; --intake-fs-pcdesc: 12px; /* was 12.5 */ --intake-fs-detail: 14px; --intake-fs-fine: 12px; /* was 13 */ --intake-fs-btn: 16px; --intake-fs-label: 12px; --intake-fw-label: 600; --intake-tracking-label: 0.1em; /* was 0.16em */ --intake-pad-page: 56px; /* was 30px (the shared .stage default) */ --intake-explain-w: 900px; /* was 800px */ --intake-sec-gap: 30px; /* was 32px */ --intake-pc-gap: 15px; /* was 8px */ --intake-pc-cols: 5; --intake-wbase-gap: 34px; /* was 24px */ --intake-card-pad: 24px; } :root[data-theme="dark"] { --bg: #1A1512; --surface: #241E1A; --ink: #F0E9DE; --muted: #A89A8C; --line: #3A322B; --accent: #C25563; /* lifted claret */ --data-current: #C25563; --data-benchmark:#7FA8C4; --good: #6FB090; --warn: #E0A945; --on-accent: #FFFFFF; --shadow-faint: 0 1px 2px rgba(0,0,0,.25); --muted-3: #8F8276; --faint-x: #5C5148; --grid-line: #332B24; --track-bg: #2C251F; --bar-bg: rgba(26,21,18,.88); --ring-outer: #2C2620; --ring-inner: #33291F; /* Re-stepped 2026-07-27 (Ashley's browser QA pass): the first cut held chroma flat across all 4/3 steps, so on a near-black surface — where every step is necessarily pale, to clear 4.5:1 text contrast at all — the ramp read as one washed-out pink rather than a visible gradient. Growing chroma low->high alongside lightness (muted grey-toned bottom step -> saturated top step) gives the ramp a second, more visible axis of change without touching the light-mode values (unaffected by this) or the *-fill-* steps (unaffected — QA called those out as already reading fine). Still WCAG 4.5:1+ at every step; still passes the dataviz skill's --ordinal checks (monotone L, adjacent ΔL >= 0.06, single hue). */ --lvl-1: #958485; --lvl-2: #b99295; --lvl-3: #dea0a4; --lvl-4: #ffaeb4; --lvl-fill-1: #82182f; --lvl-fill-2: #962c3f; --lvl-fill-3: #aa3f4f; --lvl-fill-4: #be5260; --aif-lvl-1: #848e94; --aif-lvl-2: #8db0c9; --aif-lvl-3: #92d3ff; --aif-fill-1: #1a4159; --aif-fill-2: #365d76; --aif-fill-3: #527a94; } /* Prefer the OS setting when the app has not stamped an explicit theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1A1512; --surface:#241E1A; --ink:#F0E9DE; --muted:#A89A8C; --line:#3A322B; --accent:#C25563; --data-current:#C25563; --data-benchmark:#7FA8C4; --good:#6FB090; --warn:#E0A945; --shadow-faint:0 1px 2px rgba(0,0,0,.25); --muted-3:#8F8276; --faint-x:#5C5148; --grid-line:#332B24; --track-bg:#2C251F; --bar-bg:rgba(26,21,18,.88); --ring-outer:#2C2620; --ring-inner:#33291F; --lvl-1:#958485; --lvl-2:#b99295; --lvl-3:#dea0a4; --lvl-4:#ffaeb4; --lvl-fill-1:#82182f; --lvl-fill-2:#962c3f; --lvl-fill-3:#aa3f4f; --lvl-fill-4:#be5260; --aif-lvl-1:#848e94; --aif-lvl-2:#8db0c9; --aif-lvl-3:#92d3ff; --aif-fill-1:#1a4159; --aif-fill-2:#365d76; --aif-fill-3:#527a94; } }