/* ==========================================================================
RAE ANALYTICS · DESIGN TOKENS + CORE STYLES · v2.0 · 2026
--------------------------------------------------------------------------
Companion file to the interactive style guide.
INSTALL (WordPress, today):
1. Load fonts — add to your theme header (or a header-scripts plugin):
2. Paste this whole file into Appearance → Customize → Additional CSS.
3. Component classes are prefixed .ra- so they won't collide with the theme.
RULES BAKED IN:
· Gold is large-text/dark-ground only on light backgrounds (3.74:1).
· One primary CTA per view. Sentence case everywhere — no uppercase buttons.
· Status colors are reserved for state and always ship with an icon/label.
· Chart series take slots 1→6 in order, never cycled, never re-assigned.
========================================================================== */
:root {
/* ---- primitives · ink & slate (all neutrals share the ink hue) ---- */
--ra-ink-950: #0C141B;
--ra-ink-900: #101820;
--ra-ink-800: #24303A;
--ra-slate-700: #46555F; /* secondary text on light · 7.2:1 */
--ra-slate-600: #5F6E77; /* muted text on light · 4.9:1 */
--ra-slate-500: #7C8B92; /* placeholders, disabled — not body text */
--ra-slate-300: #C9D4D6; /* strong borders */
--ra-slate-200: #E2E9E9; /* hairlines */
--ra-slate-100: #EFF3F2; /* subtle fills */
--ra-paper: #F6F8F7; /* light page ground */
--ra-white: #FFFFFF; /* cards on paper */
/* ---- signal teal (light) + cyan (dark) ---- */
--ra-teal-700: #0B6570; /* hover · 6.3:1 on paper */
--ra-teal-600: #0E7C86; /* links, buttons, focus · 4.6:1 on paper */
--ra-teal-100: #DDEEF0;
--ra-teal-050: #EBF5F6; /* washes, chips */
--ra-cyan-400: #3FC1CE; /* dark-mode accent · 8.3:1 on ink */
--ra-cyan-300: #63D2DD; /* dark-mode hover */
/* ---- signature gold ---- */
--ra-gold-600: #9E7A21; /* light mode — LARGE TEXT ONLY (3.74:1) */
--ra-gold-500: #C9A254; /* dark mode — fully accessible (7.5:1) */
--ra-gold-100: #F3EAD5;
/* ---- status (reserved; icon + label always) ---- */
--ra-ok: #1E7A4E; --ra-ok-dark: #4CAF7D;
--ra-warn: #9A5B0F; --ra-warn-dark: #D9A44A;
--ra-crit: #BA3B3B; --ra-crit-dark: #E07A7A;
/* ---- data-viz categorical slots · CVD-validated · fixed order ---- */
--ra-cat-1: #009199; /* teal */
--ra-cat-2: #9E7A21; /* gold */
--ra-cat-3: #3D6FA5; /* blue */
--ra-cat-4: #B3593E; /* clay */
--ra-cat-5: #6B55AD; /* violet */
--ra-cat-6: #3F8F4F; /* green */
/* ---- typography ---- */
--ra-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--ra-font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--ra-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* type scale · 1.25 ratio with display jumps (px reference) */
--ra-text-d1: 3.5rem; /* 56 · display-1 · display 800 · lh 1.02 */
--ra-text-d2: 2.5rem; /* 40 · display-2 · display 800 · lh 1.08 */
--ra-text-h1: 1.875rem; /* 30 · heading-1 · display 700 · lh 1.15 */
--ra-text-h2: 1.5rem; /* 24 · heading-2 · display 700 · lh 1.2 */
--ra-text-h3: 1.1875rem; /* 19 · heading-3 · display 600 · lh 1.3 */
--ra-text-lead: 1.125rem; /* 18 · lead · body 400 · lh 1.6 */
--ra-text-body: 1rem; /* 16 · body · body 400 · lh 1.65 */
--ra-text-small: .875rem; /* 14 · small · body 400 · lh 1.6 */
--ra-text-label: .719rem; /* 11.5 · eyebrow · mono 500 · caps · +22% tracking */
/* ---- space (4px base) · shape · elevation ---- */
--ra-s1: 4px; --ra-s2: 8px; --ra-s3: 12px; --ra-s4: 16px; --ra-s5: 24px;
--ra-s6: 32px; --ra-s7: 48px; --ra-s8: 64px; --ra-s9: 96px;
--ra-r-sm: 6px; /* inputs, tags, small tiles */
--ra-r-md: 10px; /* cards, media, panels */
--ra-r-pill: 999px; /* buttons, chips — the "node & trace" geometry */
--ra-shadow-soft: 0 1px 2px rgba(16,24,32,.05), 0 4px 14px -6px rgba(16,24,32,.08);
--ra-shadow-raised: 0 12px 34px -12px rgba(16,24,32,.22);
--ra-frame: 1200px; /* max content width */
/* ---- semantic aliases (what components actually consume) ---- */
--ra-bg: var(--ra-paper);
--ra-card: var(--ra-white);
--ra-card-2: var(--ra-slate-100);
--ra-tx: var(--ra-ink-900);
--ra-tx-2: var(--ra-slate-700);
--ra-tx-3: var(--ra-slate-600);
--ra-line: var(--ra-slate-200);
--ra-line-strong: var(--ra-slate-300);
--ra-accent: var(--ra-teal-600);
--ra-accent-hover: var(--ra-teal-700);
--ra-accent-ink: #FFFFFF; /* text on accent fills */
--ra-wash: var(--ra-teal-050);
--ra-wash-line: var(--ra-teal-100);
--ra-gold: var(--ra-gold-600);
color-scheme: light;
}
/* ---- dark theme · re-tuned tokens, not an inversion ------------------- */
@media (prefers-color-scheme: dark) {
:root {
--ra-bg: var(--ra-ink-950);
--ra-card: #16212B;
--ra-card-2: #1C2A36;
--ra-tx: #EDF1F0;
--ra-tx-2: #C3CDD2;
--ra-tx-3: #95A6AE;
--ra-line: #243139;
--ra-line-strong: #33434D;
--ra-accent: var(--ra-cyan-400);
--ra-accent-hover: var(--ra-cyan-300);
--ra-accent-ink: var(--ra-ink-950);
--ra-wash: rgba(63,193,206,.10);
--ra-wash-line: rgba(63,193,206,.28);
--ra-gold: var(--ra-gold-500);
--ra-ok: var(--ra-ok-dark); --ra-warn: var(--ra-warn-dark); --ra-crit: var(--ra-crit-dark);
--ra-shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -8px rgba(0,0,0,.5);
--ra-shadow-raised: 0 16px 44px -14px rgba(0,0,0,.6);
/* dark categorical slots — separately validated on #16212B */
--ra-cat-1: #189DAC; --ra-cat-2: #BA8C35; --ra-cat-3: #4C86C8;
--ra-cat-4: #C96F52; --ra-cat-5: #9179CC; --ra-cat-6: #55A36B;
color-scheme: dark;
}
}
/* explicit user choice beats the OS preference, in both directions */
:root[data-theme="dark"] {
--ra-bg: var(--ra-ink-950); --ra-card: #16212B; --ra-card-2: #1C2A36;
--ra-tx: #EDF1F0; --ra-tx-2: #C3CDD2; --ra-tx-3: #95A6AE;
--ra-line: #243139; --ra-line-strong: #33434D;
--ra-accent: var(--ra-cyan-400); --ra-accent-hover: var(--ra-cyan-300);
--ra-accent-ink: var(--ra-ink-950);
--ra-wash: rgba(63,193,206,.10); --ra-wash-line: rgba(63,193,206,.28);
--ra-gold: var(--ra-gold-500);
--ra-ok: var(--ra-ok-dark); --ra-warn: var(--ra-warn-dark); --ra-crit: var(--ra-crit-dark);
--ra-shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -8px rgba(0,0,0,.5);
--ra-shadow-raised: 0 16px 44px -14px rgba(0,0,0,.6);
--ra-cat-1: #189DAC; --ra-cat-2: #BA8C35; --ra-cat-3: #4C86C8;
--ra-cat-4: #C96F52; --ra-cat-5: #9179CC; --ra-cat-6: #55A36B;
color-scheme: dark;
}
:root[data-theme="light"] {
--ra-bg: var(--ra-paper); --ra-card: var(--ra-white); --ra-card-2: var(--ra-slate-100);
--ra-tx: var(--ra-ink-900); --ra-tx-2: var(--ra-slate-700); --ra-tx-3: var(--ra-slate-600);
--ra-line: var(--ra-slate-200); --ra-line-strong: var(--ra-slate-300);
--ra-accent: var(--ra-teal-600); --ra-accent-hover: var(--ra-teal-700); --ra-accent-ink: #FFFFFF;
--ra-wash: var(--ra-teal-050); --ra-wash-line: var(--ra-teal-100);
--ra-gold: var(--ra-gold-600);
--ra-ok: #1E7A4E; --ra-warn: #9A5B0F; --ra-crit: #BA3B3B;
--ra-shadow-soft: 0 1px 2px rgba(16,24,32,.05), 0 4px 14px -6px rgba(16,24,32,.08);
--ra-shadow-raised: 0 12px 34px -12px rgba(16,24,32,.22);
--ra-cat-1: #009199; --ra-cat-2: #9E7A21; --ra-cat-3: #3D6FA5;
--ra-cat-4: #B3593E; --ra-cat-5: #6B55AD; --ra-cat-6: #3F8F4F;
color-scheme: light;
}
/* ==========================================================================
BASE — safe to apply site-wide
========================================================================== */
body {
background: var(--ra-bg);
color: var(--ra-tx);
font-family: var(--ra-font-body);
font-size: var(--ra-text-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--ra-font-display); letter-spacing: -.015em; text-wrap: balance; color: var(--ra-tx); }
h1 { font-size: var(--ra-text-h1); font-weight: 700; line-height: 1.15; }
h2 { font-size: var(--ra-text-h2); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--ra-text-h3); font-weight: 600; line-height: 1.3; }
a { color: var(--ra-accent); text-decoration: none; }
a:hover { color: var(--ra-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ra-accent); outline-offset: 2px; }
::selection { background: var(--ra-accent); color: var(--ra-accent-ink); }
/* ==========================================================================
COMPONENTS
========================================================================== */
/* ---- buttons · pill geometry, sentence case ---- */
.ra-btn {
display: inline-flex; align-items: center; gap: 8px;
border-radius: var(--ra-r-pill);
font-family: var(--ra-font-body); font-weight: 600; font-size: .906rem;
padding: 11px 22px; border: 1px solid transparent; cursor: pointer;
text-decoration: none; text-transform: none;
transition: background .15s, border-color .15s, color .15s;
}
.ra-btn--primary { background: var(--ra-accent); color: var(--ra-accent-ink); }
.ra-btn--primary:hover { background: var(--ra-accent-hover); color: var(--ra-accent-ink); text-decoration: none; }
.ra-btn--secondary { background: transparent; color: var(--ra-tx); border-color: var(--ra-line-strong); }
.ra-btn--secondary:hover { border-color: var(--ra-accent); color: var(--ra-accent); text-decoration: none; }
.ra-btn--ghost { background: transparent; color: var(--ra-accent); padding: 11px 8px; }
.ra-btn:disabled { opacity: .45; pointer-events: none; }
.ra-btn--lg { padding: 14px 28px; font-size: .969rem; }
.ra-btn--sm { padding: 7px 16px; font-size: .813rem; }
/* ---- eyebrow label · mono, uppercase, teal node ---- */
.ra-eyebrow {
display: flex; align-items: center; gap: 10px;
font-family: var(--ra-font-mono); font-weight: 500;
font-size: var(--ra-text-label); letter-spacing: .24em; text-transform: uppercase;
color: var(--ra-tx-3);
}
.ra-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ra-accent); }
.ra-eyebrow--gold { color: var(--ra-gold); } /* dark grounds, or ≥18px on light */
/* ---- circuit-trace divider · the section separator ---- */
.ra-trace { position: relative; height: 1px; background: var(--ra-line); margin: var(--ra-s5) 0 var(--ra-s6); }
.ra-trace::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ra-accent); }
.ra-trace::after { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 1px; background: var(--ra-accent); }
/* ---- cards ---- */
.ra-card {
background: var(--ra-card); border: 1px solid var(--ra-line);
border-radius: var(--ra-r-md); padding: var(--ra-s5);
}
.ra-card--hover { transition: border-color .15s, box-shadow .15s, transform .15s; }
.ra-card--hover:hover { border-color: var(--ra-accent); box-shadow: var(--ra-shadow-soft); transform: translateY(-2px); }
/* ---- chips ---- */
.ra-chip {
display: inline-flex; align-items: center; gap: 7px;
border-radius: var(--ra-r-pill); font-size: .781rem; font-weight: 600; padding: 5px 13px;
}
.ra-chip--teal { background: var(--ra-wash); color: var(--ra-accent); border: 1px solid var(--ra-wash-line); }
.ra-chip--gold { background: var(--ra-gold-100); color: var(--ra-gold-600); } /* label-size only on light */
.ra-chip--neutral { background: var(--ra-card-2); color: var(--ra-tx-2); border: 1px solid var(--ra-line); }
/* ---- stat tile ---- */
.ra-stat { display: flex; flex-direction: column; gap: 4px; }
.ra-stat__value {
font-family: var(--ra-font-display); font-weight: 800;
font-size: var(--ra-text-d2); line-height: 1; letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
}
.ra-stat__label {
font-family: var(--ra-font-mono); font-weight: 500;
font-size: .688rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ra-tx-3);
}
/* ---- form fields ---- */
.ra-field { display: flex; flex-direction: column; gap: 7px; }
.ra-field label {
font-family: var(--ra-font-mono); font-weight: 500;
font-size: .656rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-tx-3);
}
.ra-field input, .ra-field textarea, .ra-field select {
font: inherit; font-size: .906rem; color: var(--ra-tx); background: var(--ra-bg);
border: 1px solid var(--ra-line-strong); border-radius: 8px; padding: 11px 14px;
transition: border-color .15s, box-shadow .15s;
}
.ra-field input:focus, .ra-field textarea:focus, .ra-field select:focus {
outline: none; border-color: var(--ra-accent); box-shadow: 0 0 0 3px var(--ra-wash);
}
.ra-field--error input { border-color: var(--ra-crit); }
/* ---- ink panel · heroes and footers stay ink in both themes ---- */
.ra-ink-panel { background: var(--ra-ink-950); color: #EDF1F0; border: 1px solid #243139; border-radius: var(--ra-r-md); }
.ra-ink-panel a { color: var(--ra-cyan-400); }
.ra-ink-panel a:hover { color: var(--ra-cyan-300); }
.ra-ink-panel .ra-eyebrow, .ra-ink-panel .ra-eyebrow--gold { color: #C9A254; }
/* ---- photo treatments ---- */
.ra-img-duotone img { filter: grayscale(1) contrast(1.05); }
.ra-img-duotone { position: relative; }
.ra-img-duotone::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(14,124,134,.55), rgba(16,24,32,.6));
mix-blend-mode: color;
}
.ra-img-scrim { position: relative; }
.ra-img-scrim::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(12,20,27,0) 30%, rgba(12,20,27,.82));
}
/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}