/* ReportWise — design tokens (dark + light)
* Drop-in CSS custom properties. Imported globally, BEFORE style.css:
*
*
*
* Dark is default. Add `data-theme="light"` on (or any ancestor)
* to flip. A `prefers-color-scheme: light` fallback is included.
*
* See design-spec.md for usage rules.
*/
:root {
/* ── Brand (theme-invariant) ─────────────────────────── */
--rw-sage: #7a9a6e;
--rw-sage-bright: #8fb381; /* glowing accents on dark */
--rw-sage-deep: #4f6c48; /* readable sage on light */
--rw-sage-ink: #2d3d29; /* darkest sage — text on light tints */
--rw-amber: #d4a04a; /* medium risk / caution (dark) */
--rw-amber-deep: #b97d2a; /* medium risk (light) */
--rw-alert: #e0724a; /* high risk / defect (dark) */
--rw-alert-deep: #b74a28; /* high risk (light) */
/* ── Semantic surface + text (dark defaults) ─────────── */
--rw-bg: #050706;
--rw-bg-raised: #0f1614;
--rw-bg-sunken: #0a0e0c;
--rw-text: #f4f1ea;
--rw-text-muted: rgba(244, 241, 234, 0.72);
--rw-text-dim: rgba(244, 241, 234, 0.55);
--rw-line: rgba(244, 241, 234, 0.18);
--rw-line-strong: rgba(244, 241, 234, 0.30);
--rw-accent: var(--rw-sage);
--rw-accent-fg: var(--rw-sage-bright); /* brighter accent text */
--rw-on-accent: #0a0e0c; /* text on sage button */
/* button primary */
--rw-btn-bg: var(--rw-sage);
--rw-btn-fg: #0a0e0c;
--rw-bg-page: radial-gradient(ellipse at 30% 25%, #0f1614 0%, #070a09 55%, #050706 100%);
--rw-bg-glow: radial-gradient(circle at 68% 52%, rgba(122,154,110,0.16), transparent 55%);
--rw-grid-stroke: rgba(122,154,110,0.07);
--rw-glow-accent: 0 0 24px -4px var(--rw-sage);
--rw-shadow-card: none;
/* ── Typography (theme-invariant) ────────────────────── */
--rw-font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--rw-font-serif: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
--rw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--rw-size-display: clamp(44px, 7.2vw, 108px);
--rw-size-h1: clamp(36px, 4.5vw, 56px);
--rw-size-h2: clamp(28px, 3vw, 40px);
--rw-size-body: clamp(15px, 1.2vw, 17px);
--rw-size-small: 13px;
--rw-size-label: 11px;
--rw-size-micro: 10px;
--rw-track-display: -0.04em;
--rw-track-heading: -0.02em;
--rw-track-label: 0.14em;
--rw-track-button: 0.1em;
/* ── Spacing ─────────────────────────────────────────── */
--rw-space-1: 8px;
--rw-space-2: 16px;
--rw-space-3: 24px;
--rw-space-4: 36px;
--rw-space-5: 56px;
--rw-space-6: 80px;
--rw-space-7: 120px;
--rw-gutter: clamp(24px, 5vw, 64px);
--rw-max-w: 1440px;
--rw-measure: 560px;
/* ── Shape ───────────────────────────────────────────── */
--rw-radius-sm: 4px;
--rw-radius-md: 6px;
--rw-radius-pill: 999px;
/* ── Motion ──────────────────────────────────────────── */
--rw-ease: cubic-bezier(.2, .7, .3, 1);
--rw-dur-fast: 150ms;
--rw-dur-base: 300ms;
--rw-dur-slow: 700ms;
}
/* ── Light theme overrides ─────────────────────────────── */
:root[data-theme="light"],
.rw-theme-light {
--rw-bg: #f5f2ea;
--rw-bg-raised: #fbf8f1;
--rw-bg-sunken: #ece7da;
--rw-text: #141a18;
--rw-text-muted: #3a4340;
--rw-text-dim: rgba(20, 26, 24, 0.62);
--rw-line: rgba(20, 26, 24, 0.14);
--rw-line-strong: rgba(20, 26, 24, 0.28);
--rw-accent: var(--rw-sage-deep);
--rw-accent-fg: var(--rw-sage-ink);
--rw-on-accent: var(--rw-bg-raised);
/* ink as button primary on light, sage as accent */
--rw-btn-bg: #141a18;
--rw-btn-fg: #fbf8f1;
--rw-bg-page: radial-gradient(ellipse at 30% 25%, #fbf8f1 0%, #f5f2ea 55%, #ece7da 100%);
--rw-bg-glow: radial-gradient(circle at 68% 52%, rgba(122,154,110,0.1), transparent 55%);
--rw-grid-stroke: rgba(20, 26, 24, 0.055);
--rw-glow-accent: 0 6px 20px -6px #141a18;
--rw-shadow-card: 0 1px 2px rgba(20,26,24,0.04);
}
/* Respect OS preference when app hasn't declared a theme */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme]) {
--rw-bg: #f5f2ea;
--rw-bg-raised: #fbf8f1;
--rw-bg-sunken: #ece7da;
--rw-text: #141a18;
--rw-text-muted: #3a4340;
--rw-text-dim: rgba(20, 26, 24, 0.62);
--rw-line: rgba(20, 26, 24, 0.14);
--rw-line-strong: rgba(20, 26, 24, 0.28);
--rw-accent: var(--rw-sage-deep);
--rw-accent-fg: var(--rw-sage-ink);
--rw-on-accent: var(--rw-bg-raised);
--rw-btn-bg: #141a18;
--rw-btn-fg: #fbf8f1;
--rw-bg-page: radial-gradient(ellipse at 30% 25%, #fbf8f1 0%, #f5f2ea 55%, #ece7da 100%);
--rw-bg-glow: radial-gradient(circle at 68% 52%, rgba(122,154,110,0.1), transparent 55%);
--rw-grid-stroke: rgba(20, 26, 24, 0.055);
--rw-glow-accent: 0 6px 20px -6px #141a18;
--rw-shadow-card: 0 1px 2px rgba(20,26,24,0.04);
}
}
/* ── Root ────────────────────────────────────────────── */
.rw-root {
background: var(--rw-bg);
color: var(--rw-text);
font-family: var(--rw-font-sans);
font-size: var(--rw-size-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.rw-root ::selection { background: rgba(122,154,110,0.35); color: var(--rw-text); }
/* ── Primitives ───────────────────────────────────────── */
.rw-display {
font-family: var(--rw-font-sans);
font-weight: 300;
font-size: var(--rw-size-display);
line-height: 0.95;
letter-spacing: var(--rw-track-display);
margin: 0;
color: var(--rw-text);
}
.rw-display em,
.rw-display .rw-accent {
font-family: var(--rw-font-serif);
font-style: italic;
font-weight: 400;
color: var(--rw-accent);
}
.rw-label {
font-family: var(--rw-font-mono);
font-size: var(--rw-size-label);
font-weight: 500;
letter-spacing: var(--rw-track-label);
text-transform: uppercase;
color: var(--rw-text-muted);
}
/* eyebrow is now a pill plate — legible on both themes.
2026-04 mobile audit follow-up: added left-padding on the pill
and switched the ::before dot to position:absolute. The dot was
previously an inline-flex child with `transform: scale(1 → 1.15)`
on a 1.4s loop; on iOS Safari this was visibly causing the
eyebrow's line-box to jitter every ~1.4s, which cascaded down
through the H1 and hero lead paragraphs as a repeating
wrap/unwrap. Taking the dot out of flow decouples its animation
from parent layout entirely. Visual position is identical to
before (14 px from the left edge, vertically centred). */
.rw-eyebrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px 7px 28px;
background: color-mix(in oklab, var(--rw-sage) 14%, transparent);
border: 1px solid color-mix(in oklab, var(--rw-accent) 40%, transparent);
border-radius: var(--rw-radius-pill);
font-family: var(--rw-font-mono);
font-size: var(--rw-size-label);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rw-accent-fg);
}
.rw-eyebrow::before {
content: '';
position: absolute;
left: 12px;
top: 50%;
width: 7px; height: 7px;
margin-top: -3.5px;
background: var(--rw-accent-fg);
box-shadow: 0 0 10px var(--rw-accent-fg);
border-radius: 4px;
animation: rw-pulse 1.4s ease-in-out infinite;
/* will-change hints the compositor to keep this on its own
layer so transform updates don't trigger enclosing element
repaints on Safari. */
will-change: transform, opacity;
}
/* Raised card with sage accent bar — used for body paragraphs. */
.rw-card {
background: var(--rw-bg-raised);
border: 1px solid var(--rw-line);
border-left: 3px solid var(--rw-accent);
border-radius: var(--rw-radius-sm);
padding: 18px 22px;
box-shadow: var(--rw-shadow-card);
}
/* Plinth: framed block for stats / tickers. */
.rw-plinth {
background: var(--rw-bg-raised);
border: 1px solid var(--rw-line);
border-radius: var(--rw-radius-sm);
padding: 20px 24px;
box-shadow: var(--rw-shadow-card);
}
.rw-btn {
font-family: var(--rw-font-mono);
font-weight: 600;
font-size: var(--rw-size-small);
letter-spacing: var(--rw-track-button);
text-transform: uppercase;
background: var(--rw-btn-bg);
color: var(--rw-btn-fg);
border: none;
padding: 10px 22px;
border-radius: var(--rw-radius-sm);
cursor: pointer;
transition: transform var(--rw-dur-fast) var(--rw-ease),
box-shadow var(--rw-dur-base) var(--rw-ease);
}
.rw-btn:hover { transform: translateY(-1px); box-shadow: var(--rw-glow-accent); }
.rw-btn--lg { padding: 14px 26px; }
.rw-btn--ghost {
background: transparent;
color: var(--rw-text);
border: 1px solid var(--rw-line-strong);
}
.rw-btn--ghost:hover {
border-color: var(--rw-accent);
color: var(--rw-accent);
box-shadow: none;
transform: translateY(-1px);
}
.rw-input {
width: 100%;
background: var(--rw-bg-raised);
border: 1px solid var(--rw-line-strong);
border-radius: var(--rw-radius-md);
padding: 14px 18px;
font-family: var(--rw-font-mono);
font-size: 14px;
font-weight: 500;
color: var(--rw-text);
outline: none;
transition: border-color var(--rw-dur-fast), box-shadow var(--rw-dur-base);
}
.rw-input:focus {
border-color: var(--rw-accent);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--rw-accent) 25%, transparent);
}
.rw-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--rw-font-sans);
font-size: 11.5px;
padding: 5px 11px;
border: 1px solid var(--rw-line);
border-radius: var(--rw-radius-pill);
color: var(--rw-text-muted);
}
.rw-stat-num {
font-family: var(--rw-font-serif);
font-weight: 400;
font-size: clamp(28px, 3vw, 40px);
letter-spacing: var(--rw-track-heading);
line-height: 1;
color: var(--rw-text);
}
.rw-stat-label {
font-family: var(--rw-font-mono);
font-size: var(--rw-size-label);
font-weight: 500;
letter-spacing: var(--rw-track-label);
text-transform: uppercase;
color: var(--rw-text-muted);
margin-top: 6px;
}
.rw-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 4px;
background: var(--rw-accent);
box-shadow: 0 0 12px var(--rw-accent);
}
.rw-dot--live { animation: rw-pulse 1.4s ease-in-out infinite; }
.rw-dot--amber { background: var(--rw-amber); box-shadow: 0 0 12px var(--rw-amber); }
.rw-dot--alert { background: var(--rw-alert); box-shadow: 0 0 12px var(--rw-alert); }
.rw-ticker {
display: flex;
gap: 36px;
font-family: var(--rw-font-mono);
font-size: var(--rw-size-label);
font-weight: 500;
letter-spacing: var(--rw-track-label);
color: var(--rw-text-muted);
white-space: nowrap;
overflow: hidden;
}
.rw-ticker .rw-diamond { color: var(--rw-accent); }
.rw-divider { height: 1px; background: var(--rw-line); border: 0; }
/* ── Backdrop utilities ───────────────────────────────── */
.rw-bg-hero {
background: var(--rw-bg-page);
position: relative;
}
.rw-bg-grid::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(var(--rw-grid-stroke) 1px, transparent 1px),
linear-gradient(90deg, var(--rw-grid-stroke) 1px, transparent 1px);
background-size: 64px 64px;
opacity: 0.5;
}
.rw-bg-glow::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: var(--rw-bg-glow);
}
/* ── Focus ─────────────────────────────────────────────── */
.rw-root :is(a, button, [tabindex]):focus-visible {
outline: 2px solid var(--rw-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* ── Fallback font metric-matching (mobile CLS fix) ───
The hero H1 mixes Inter Tight (sans) with a Fraunces italic
. Until Fraunces arrives from Google Fonts, the browser
renders the in whatever serif it can find (Georgia on
iOS/macOS, a generic serif elsewhere). Those fallbacks have
different ascent/descent/advance metrics from Fraunces, so
once Fraunces arrives the word re-wraps and the whole
headline jumps one line — a visible layout shift on mobile
and a one-off CLS penalty in Lighthouse.
We declare an aliased fallback face that borrows the local
serif's glyphs but rewrites the metrics to match Fraunces
so the line-box stays stable. Stack 'Fraunces' first, this
alias second, then generic fallbacks — Fraunces arriving
later produces zero reflow because the text is already sized
for it. Values derived from the Fraunces-italic metrics:
units-per-em 1000, ascent 980, descent 240, cap-height 700,
normalised to Georgia's metrics via the font-style-matcher
technique. Approximate but close enough to eliminate
user-visible reflow on the fraction-of-a-second Fraunces
takes to load. */
@font-face {
font-family: 'Fraunces Fallback';
font-style: italic;
font-weight: 400 500;
src: local('Georgia Italic'), local('Georgia-Italic'), local('Times New Roman Italic'), local('Times-Italic');
ascent-override: 96%;
descent-override: 24%;
line-gap-override: 0%;
size-adjust: 102%;
}
/* ── Keyframes ───────────────────────────────────────── */
@keyframes rw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.15); } }
@keyframes rw-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes rw-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rw-fade-in { animation: rw-fade-in 0.7s var(--rw-ease) both; }
/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.rw-dot--live { animation: none !important; }
.rw-fade-in { animation-duration: 200ms !important; }
}