:root { --pm-navy: #10243E; --pm-green: #0BA47E; --pm-accent: #3DD9A8; --pm-bg: #EDF1F6; --pm-amber: #F5B133; /* Text-safe variants: the display hues above are too light to carry text at WCAG AA, so anything that renders *text* in a brand colour uses these. */ --pm-amber-text: #916414; --pm-pink: #E5758A; --pm-pink-text: #CB2645; --pm-blue: #3C7DD9; --pm-blue-text: #276ACA; --pm-green-text: #087C60; /* Secondary / muted body text on light surfaces (both clear AA on white). */ --pm-text-secondary: #5D6A7A; --pm-text-muted: #5F7182; --pm-font-title: 'Space Grotesk', system-ui, sans-serif; --pm-font-body: 'IBM Plex Sans', system-ui, sans-serif; --pm-font-brand: 'Plus Jakarta Sans', system-ui, sans-serif; --pm-font-mono: 'IBM Plex Mono', monospace; } body { font-family: var(--pm-font-body); background: var(--pm-bg); color: var(--pm-navy); } .pm-wordmark { font-family: var(--pm-font-brand); font-weight: 700; letter-spacing: -1px; color: var(--pm-navy); } /* ---------- FOCUS (WCAG 2.4.7 / 2.4.11) ---------- Global, because most inputs in the panels are raw elements with inline styles and no shared class to hang a rule on. A colour change alone is not a focus indicator: an outline is used so the ring sits outside the control and stays visible whatever the element's own background is. --pm-focus (#087C60) clears 3:1 against every light surface we place controls on (white 5.17:1, #F7F9FB 4.90:1, --pm-bg 4.56:1). It is too close to the navy sidebar (3.02:1) to rely on there, so the sidebar swaps in the bright accent (--pm-focus-invert on #10243E: 8.70:1). */ :root { --pm-focus: #087C60; --pm-focus-invert: #3DD9A8; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; border-radius: 4px; } /* The navy sidebar: same ring, inverted so it reads against the dark ground. */ [data-side] a:focus-visible, [data-side] button:focus-visible, [data-side] input:focus-visible, [data-side] select:focus-visible, [data-side] [tabindex]:focus-visible { outline-color: var(--pm-focus-invert); } /* The file input is clipped to 1px, so its own ring would be invisible — draw it on the dropzone the user actually sees instead. */ .pm-dropzone__input:focus-visible { outline: none; } .pm-dropzone:has(.pm-dropzone__input:focus-visible) { outline: 3px solid var(--pm-focus); outline-offset: 2px; } /* ---------- REDUCED MOTION ---------- Curtailed per component rather than with a blanket `* { animation: none }`: the upload spinner has to keep turning to show a 5-30s AI read is alive, so it slows down instead of stopping (see panel.css). Decorative motion is cut outright — see landing.css (pmFloat) and panel.css (the drawer). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- TURBO PROGRESS BAR ---------- Turbo Drive injects `.turbo-progress-bar` with a hardcoded `background: #0076ff` — a stock blue that belongs to no part of our navy/green palette. Turbo installs its stylesheet as the first child of , so this rule (same specificity, later in the cascade) wins without !important. Shown on navigations slower than 500ms. */ .turbo-progress-bar { background: linear-gradient(90deg, var(--pm-navy) 0%, var(--pm-green) 100%); }