/* =========================================================================
RMBL Data Hub family — shared design tokens · v1
https://data.rmbl.org/brand/v1/tokens.css
One source of truth for the Data Hub, SDP Browser, Knowledge Commons and
Compute Hub. Harmonized with rmbl.org (Elementor globals, Nov 2026); the
dark theme and the --data-* palette are cleared deviations for our tools.
CONTRACT
· Variables only — no selectors that style elements. Each tool keeps its
own component CSS and reads these variables.
· Within v1, variable NAMES are stable. Values may be tuned (e.g. a
contrast fix) and tools pick that up automatically. Renaming or
removing a variable means publishing /brand/v2/ and leaving v1 in place.
· Dark is the default. Opt into light with data-theme="light" on
or any container; data-theme="dark" restores dark inside a light page.
USAGE — in , before the tool's own stylesheet:
The Adobe Fonts kit (Futura PT, Bodoni URW) only serves domains on its
allow-list; Jost / Cormorant Garamond are the fallbacks.
Logo: https://data.rmbl.org/brand/v1/logo-rmbl-band.png (720×267, cropped
to the orange band). Docs: docs/brand-tokens.md in rmbl-sdp/data_hub.
========================================================================= */
:root {
/* ---------- BRAND (rmbl.org globals) ---------- */
--rmbl-orange: #EF4123; /* primary brand — marks, rules, dots */
--rmbl-orange-deep: #C2330F; /* solid fills behind white text (5.6:1) */
--rmbl-red: #D0350F; /* rmbl.org eyebrow red */
--rmbl-orange-soft: #FF6A45; /* links / eyebrows on dark (6.5:1 on --n-50) */
--rmbl-navy: #002E6D; /* secondary — light surfaces only */
--rmbl-gold: #FDB913; /* accent */
--rmbl-butter: #FFF3D3; /* warm cream band / footer headings */
--rmbl-char: #121417; /* rmbl.org footer / dark band */
--rmbl-char-2: #1A1B1E;
--rmbl-cream: #F4F2EC; /* text on dark */
--rmbl-paper: #FAF7F0;
--rmbl-bone: #E8E6DF;
/* Data Hub extensions — not on rmbl.org */
--rmbl-moss: #6B7A4A;
--rmbl-sky: #8AA9B8;
--rmbl-aspen: var(--rmbl-gold);
/* ---------- NEUTRALS (charcoal → paper) ---------- */
--n-0: #0B0C0E;
--n-50: #121417;
--n-100: #1A1B1E;
--n-200: #26272B;
--n-300: #333438;
--n-400: #4A4B50;
--n-500: #66676B;
--n-600: #77787B;
--n-700: #B9B8B3;
--n-800: #E8E6DF;
--n-900: #F4F2EC;
--n-1000: #FAF7F0;
/* ---------- DATA / STATUS (provisional; tuned for dark surfaces) ----------
Categorical series colors for charts and on-map overlays. NOT for raster
colormaps — keep viridis etc. for continuous data. */
--data-1: #EF4123; /* brand orange */
--data-2: #FDB913; /* brand gold */
--data-3: #7FA670; /* moss */
--data-4: #7FA8BF; /* sky */
--data-5: #B48BC9; /* lupine */
--data-6: #D97760; /* terracotta */
--data-7: #A89768; /* sage tan */
/* ---------- TYPE ---------- */
--font-sans: 'futura-pt', 'Jost', 'Futura PT', Futura, 'Helvetica Neue', Arial, sans-serif;
--font-serif: 'bodoni-urw', 'Cormorant Garamond', 'Bodoni URW', 'Bodoni 72', 'Didot', 'Times New Roman', serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--fs-overline: 11px;
--fs-caption: 12px;
--fs-small: 13px;
--fs-body: 16px;
--fs-body-lg: 18px;
--fs-h6: 18px;
--fs-h5: 22px;
--fs-h4: 28px;
--fs-h3: clamp(26px, 2.8vw, 40px); /* rmbl.org rmblh3 */
--fs-h2: clamp(34px, 4.2vw, 60px); /* rmbl.org rmblh2 */
--fs-h1: clamp(44px, 5.8vw, 84px); /* rmbl.org hero */
--fs-display: 90px;
--lh-tight: 1.10;
--lh-snug: 1.25;
--lh-normal: 1.45;
--lh-loose: 1.65;
--tracking-display: -0.015em;
--tracking-tight: -0.005em;
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-caps: 0.14em; /* rmbl.org eyebrows */
/* ---------- SPACING (4-based) ---------- */
--s-0: 0px;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
--s-20: 80px;
--s-24: 96px;
/* ---------- RADII (rmbl.org is square-cornered; pills only for chips) ---------- */
--r-xs: 0px;
--r-sm: 0px;
--r-md: 0px;
--r-lg: 0px;
--r-xl: 2px;
--r-pill: 999px;
/* ---------- MOTION (rmbl.org --rmbl-dur / --rmbl-ease) ---------- */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 260ms;
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}
/* ---------- DARK (default) ----------
Theme-dependent values live here, not in the :root block above, so a
data-theme container recomputes everything derived from them. */
:root,
[data-theme="dark"] {
color-scheme: dark;
--bg: var(--n-50); /* page */
--bg-elev-1: var(--n-100); /* cards, panels, header */
--bg-elev-2: var(--n-200); /* menus, popovers, hover */
--bg-elev-3: var(--n-300); /* raised / modals */
--bg-inset: var(--n-0); /* inputs, code */
--bg-overlay: rgba(18, 20, 23, 0.9); /* panels over maps / imagery */
--fg-1: var(--n-900); /* primary text (16.5:1) */
--fg-2: var(--n-700); /* secondary (9.3:1) */
--fg-3: #939497; /* caption (≥4.6:1 on all dark surfaces) */
--fg-muted: var(--n-500); /* disabled */
--fg-inverse: #26272B; /* text on light chips */
--border: rgba(244, 242, 236, 0.10);
--border-strong: rgba(244, 242, 236, 0.22);
--divider: rgba(244, 242, 236, 0.06);
--hairline: var(--n-300); /* opaque rule (rmbl.org footer border) */
--accent: var(--rmbl-orange); /* marks, rules, underlines, dots */
--accent-fill: var(--rmbl-orange-deep); /* solid button fills */
--accent-fill-hover: var(--rmbl-red);
--accent-fg: #FFFFFF; /* text on --accent-fill */
--accent-text: var(--rmbl-orange-soft); /* links, eyebrows */
--accent-hover: var(--rmbl-orange-soft);
--accent-weak: rgba(239, 65, 35, 0.15); /* tinted backgrounds */
--focus-ring: rgba(255, 106, 69, 0.55);
--ok: #7FA670;
--warn: var(--rmbl-gold);
--danger: #FF6A45;
--info: #7FA8BF;
--shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px rgba(244,242,236,0.04);
--shadow-2: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(244,242,236,0.06);
--shadow-3: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(244,242,236,0.08);
--shadow-focus: 0 0 0 3px var(--focus-ring);
--inset-hairline: inset 0 0 0 1px var(--border);
}
/* ---------- LIGHT (rmbl.org surfaces) ----------
Knowledge Commons default; also print and docs. */
[data-theme="light"] {
color-scheme: light;
--bg: #FFFFFF;
--bg-elev-1: var(--rmbl-paper);
--bg-elev-2: var(--n-900);
--bg-elev-3: #FFFFFF;
--bg-inset: var(--n-900);
--bg-overlay: rgba(255, 255, 255, 0.92);
--fg-1: var(--n-100); /* headings (17:1) */
--fg-2: #26272B; /* body — rmbl.org text color (14.9:1) */
--fg-3: var(--n-500); /* caption (≥5:1 on all light surfaces) */
--fg-muted: var(--n-700);
--fg-inverse: var(--rmbl-cream);
--border: var(--rmbl-bone);
--border-strong: var(--n-700);
--divider: var(--n-900);
--hairline: var(--rmbl-bone);
--accent: var(--rmbl-orange);
--accent-fill: var(--rmbl-orange-deep);
--accent-fill-hover: var(--rmbl-red);
--accent-fg: #FFFFFF;
--accent-text: var(--rmbl-orange-deep); /* #D0350F dips below 4.5:1 on bone */
--accent-hover: var(--rmbl-navy); /* rmbl.org link hover */
--accent-weak: rgba(239, 65, 35, 0.08);
--focus-ring: rgba(0, 46, 109, 0.6); /* rmbl.org navy focus outline */
--ok: #467036;
--warn: #8A6400;
--danger: var(--rmbl-orange-deep);
--info: #2F6383;
--shadow-1: 0 1px 0 rgba(18,20,23,0.05), 0 0 0 1px rgba(18,20,23,0.06);
--shadow-2: 0 4px 14px rgba(18,20,23,0.10), 0 0 0 1px rgba(18,20,23,0.08);
--shadow-3: 0 24px 32px -16px rgba(0,0,0,0.30);
--shadow-focus: 0 0 0 3px var(--focus-ring);
--inset-hairline: inset 0 0 0 1px var(--border);
}