/**
* Chart Factory - Shared Design Tokens
*
* These CSS custom properties define the visual foundation for all D3 components.
* Override these in your own stylesheet to customize the appearance.
*
* Usage:
* @import 'chart-factory/core/tokens.css';
*
* :root {
* --font-family: 'Your Font', sans-serif;
* --color-text-primary: #222;
* }
*/
:root {
/* ===========================
SPACING
=========================== */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 15px;
--space-5: 20px;
--space-6: 25px;
--space-7: 35px;
--space-8: 40px;
/* ===========================
TYPOGRAPHY
=========================== */
/* Default: System font stack */
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* Alternative: Open Sans (uncomment and add Google Font import to use)
* Add to :
* --font-family: 'Open Sans', sans-serif;
*/
/* Font Sizes */
--font-size-xs: 9px;
--font-size-sm: 10px;
--font-size-base: 11px;
--font-size-md: 12px;
--font-size-lg: 13px;
--font-size-xl: 14px;
--font-size-title: 28px;
--font-size-subtitle: 13px;
/* Chart-shell text hierarchy (decided from live mockups 2026-07-18):
card tier 15/11 (ratio 1.36), featured tier 20/14 (ratio 1.43).
Title size tracks reading context, not chart size. */
--shell-title-size: 15px;
--shell-subtitle-size: var(--font-size-base);
--shell-featured-title-size: 20px;
--shell-featured-subtitle-size: 14px;
/* Font Weights */
--font-weight-normal: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Letter Spacing */
--letter-spacing-tight: -0.3px;
--letter-spacing-wide: 0.8px;
--letter-spacing-wider: 1px;
/* Line Height */
--line-height-normal: 1.6;
/* ===========================
COLORS
=========================== */
/* Text Colors */
--color-black: #000;
--color-text-primary: #333;
--color-text-muted: #666;
--color-text-subtle: #767676;
--color-text-faint: #999;
--color-text-disabled: #aaa;
/* Background Colors */
--color-bg-body: #f8f8f8;
--color-bg-container: white;
--color-bg-hover: #fafafa;
--color-bg-highlight: #f0f0f0;
/* Border Colors */
--color-border-header: #000;
--color-border-row: #f0f0f0;
--color-border-light: #e5e5e5; /* light axis/grid strokes */
--color-border-footer: #e8e8e8;
--color-border-tooltip: #ddd;
/* Shadows */
--shadow-container: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.15);
/* ===========================
ANIMATIONS
=========================== */
--animation-duration-fast: 200ms;
--animation-duration-normal: 500ms;
--animation-duration-slow: 1000ms;
--animation-stagger-delay: 50ms;
/* ===========================
TOOLTIPS
=========================== */
--tooltip-z-index: 9999; /* above typical host-page modals/sticky chrome */
--tooltip-font-size: 12px; /* tooltip body (independent of chart axis text) */
--tooltip-title-font-size: 15px; /* ~1.25x body for clear title dominance */
--tooltip-row-gap: 4px; /* vertical rhythm between shell rows */
--tooltip-padding: 10px 13px;
--tooltip-border-radius: 6px;
--tooltip-min-width: 130px;
--tooltip-chart-height: 50px;
--tooltip-bar-gap: var(--space-1);
--tooltip-bar-min-width: var(--space-2);
--tooltip-bar-border-radius: 2px;
--tooltip-label-offset-y: 18px;
--tooltip-value-offset-y: 18px;
/* ===========================
CHART STORY (story: config — narrative summary module under the chart)
=========================== */
--story-font-size: var(--font-size-lg); /* body text of all three variants */
--story-line-height: 1.6;
/* Accent drives the panel tint/border, the bold lead-in label, and band
/ emphasis. The per-chart `accent` option overrides it via an
inline custom property on the module. */
--story-accent: var(--chart-primary);
/* Accent share in the panel wash / hairline (color-mix percentages) */
--story-panel-bg-alpha: 7%;
--story-panel-border-alpha: 25%;
/* Band variant: full-width dark lede strip */
--story-band-bg: #1f2937;
--story-band-text: #e5e7eb;
--story-band-label: #9ca3af; /* overline label tint on the band */
/* ===========================
RESPONSIVE
=========================== */
--container-padding: var(--space-8); /* .d3-container inner padding — the one knob for card breathing room */
--container-padding-mobile: var(--space-6) var(--space-5);
--title-font-size-mobile: 22px;
/* ===========================
CHART SHARED
=========================== */
/* Primary chart color — single-series default (line/area/bar/scatter,
forecast/actual lines, series-3). Brand blue, kept distinct from the Set2
categorical palette used for multi-series charts. */
--chart-primary: #3b82f6;
--chart-primary-light: rgba(59, 130, 246, 0.3);
--chart-primary-faint: rgba(59, 130, 246, 0.1);
/* Secondary chart colors */
--chart-secondary: #22c55e; /* line palette slot 2 (getLineColors) */
--chart-tertiary: #f97316; /* line palette slot 3 (getLineColors) */
--chart-green: #22c55e;
--chart-lime: #84cc16; /* mid-tier threshold color (progress bars) */
--chart-orange: #f97316;
--chart-purple: #a855f7;
--chart-purple-light: rgba(168, 85, 247, 0.4);
--chart-purple-faint: rgba(168, 85, 247, 0.05);
--chart-red: #ef4444;
/* Multi-series palette (for YoY, comparisons) */
--chart-series-1: #94a3b8;
--chart-series-2: #64748b;
--chart-series-3: var(--chart-primary);
/* Semantic chart colors */
--chart-trend-up: var(--chart-green);
--chart-trend-down: var(--chart-red);
--chart-anomaly: var(--chart-red);
--chart-forecast: var(--chart-primary);
--chart-actual: var(--chart-primary);
--chart-budget: var(--chart-green);
/* Neutral/gray for cumulative/baseline lines */
--chart-neutral: #6b7280;
--chart-neutral-light: rgba(107, 114, 128, 0.4);
--chart-neutral-faint: rgba(107, 114, 128, 0.05);
/* Axes */
--axis-color: var(--color-text-muted);
--axis-font-size: var(--font-size-xs);
--axis-label-font-size: var(--font-size-sm);
--axis-tick-size: 5px;
--axis-tick-padding: 3px;
/* Grid */
--grid-color: var(--color-border-row);
--grid-opacity: 0.5;
--grid-stroke-opacity: 0.5;
/* Hover states */
--hover-stroke-color: var(--color-text-primary);
--hover-stroke-width: 1;
--hover-dash-pattern: 3, 3;
--link-dot-radius: 3.5; /* snapped dot size on linked-crosshair (linkGroup) charts */
--brush-selection-opacity: 0.08; /* fill opacity of the brush selection window */
--brush-veil-opacity: 0.65; /* opacity of the outside-selection veil on linked charts */
/* Lines */
--line-stroke-width: 2;
--line-stroke-width-thin: 1;
--line-stroke-width-hover: 3;
--line-opacity: 1;
--line-opacity-muted: 0.3;
--line-dot-stroke-width: 2;
--line-transition-duration: 150;
/* Areas */
--area-opacity: 0.15;
--area-opacity-light: 0.1;
--area-gradient-start: 0.3;
--area-gradient-end: 0.02;
/* Points */
--point-radius: 4px;
--point-radius-small: 3px;
--point-radius-hover: 6px;
--point-stroke-width: 2px;
/* Confidence bands */
--band-opacity: 0.15;
--band-border-opacity: 0.3;
/* Anomaly indicators */
--anomaly-pulse-radius: 4;
--anomaly-dot-radius: 3;
/* Legend */
--legend-swatch-size: 12px;
--legend-line-width: 24px;
--legend-line-height: 2px;
--legend-gap: var(--space-4);
--legend-font-size: var(--font-size-sm);
/* Interactive legend: opacity of non-highlighted series when one is
hovered/isolated (chosen treatment: dim others, highlighted unchanged). */
--legend-dim-opacity: 0.18;
/* Trend indicators (legacy aliases) */
--trend-up-color: var(--chart-trend-up);
--trend-down-color: var(--chart-trend-down);
--trend-neutral-color: var(--color-text-muted);
/* Animation */
--chart-animation-duration: 2s;
--chart-pulse-min-opacity: 0;
--chart-pulse-max-opacity: 0.6;
/* Annotations: fade-in (ms) when an annotation waits for its anchor
mark's entrance animation before appearing */
--annotation-fade-duration: 200;
/* Event annotations (type: 'event'): tick + label band below the x-axis */
--annotation-event-band-offset: 22; /* px from plot bottom to the event ticks */
--annotation-event-tick-height: 8; /* event tick length */
--annotation-event-font-size: 10px; /* event label size */
--annotation-event-guide-color: #d1d5db; /* dotted in-plot guide (guide: true) */
/* Point/callout annotations: editorial two-line callouts + leader lines */
--annotation-title-size: 13px; /* titled callout value line (`title`) */
--annotation-leader-threshold: 14; /* px dot-to-label gap before an auto leader draws */
/* ===========================
SLOPE CHART SPECIFIC
=========================== */
/* Slope line widths */
--slope-line-width: var(--line-stroke-width);
--slope-line-width-hover: 3;
/* Slope point sizing */
--slope-point-radius: var(--point-radius);
--slope-point-radius-hover: 7px;
--slope-gap-radius: 6px;
/* Slope interaction states */
--slope-dimmed-opacity: 0.2;
--slope-transition-duration: 0.2s;
/* Slope animation */
--slope-animation-duration: 800ms;
--slope-stagger-delay: 80ms;
--slope-fade-duration: 300ms;
/* Slope highlight mode */
--slope-highlight-color: var(--chart-orange);
--slope-muted-color: #94a3b8;
/* Slope label dodge: minimum vertical gap between stacked side labels */
--slope-label-min-gap: 15;
/* Two-line right labels (createIndexed) need roughly double the gap */
--slope-label-min-gap-stacked: 34;
/* Indexed slope: hairline at the origin/no-change value */
--slope-baseline-color: var(--color-border-light);
/* Dodged-label leader lines (defaults to the hairline border color) */
--slope-leader-color: var(--color-border-light);
/* Slope band colors (quartiles, from bottom to top) */
--slope-band-1: #fef2f2;
--slope-band-2: #fefce8;
--slope-band-3: #f0fdf4;
--slope-band-4: #eff6ff;
/* ===========================
AREA CHART SPECIFIC
=========================== */
/* Area fill opacity */
--area-fill-opacity: 0.35;
--area-fill-opacity-hover: 0.5;
--area-fill-opacity-muted: 0.15;
/* Area stroke */
--area-stroke-width: 1.5;
--area-stroke-opacity: 1;
/* Categorical series palette — Set2 (house default, CVD-safe, muted).
Drives getAreaColors()/getLineColors(): stacked areas, multi-line, grouped/
stacked bars, donut, dot, scatter categories. Single-series charts use
--chart-primary, not these. Override any of these to restyle every
multi-series chart at once. */
--area-color-1: #66c2a5;
--area-color-2: #fc8d62;
--area-color-3: #8da0cb;
--area-color-4: #e78ac3;
--area-color-5: #a6d854;
--area-color-6: #ffd92f;
--area-color-7: #e5c494;
--area-color-8: #b3b3b3;
/* Area interaction */
--area-transition-duration: 0.2s;
--area-dimmed-opacity: 0.2;
/* Area animation */
--area-animation-duration: 1000ms;
--area-stagger-delay: 100ms;
/* Area gradient (for single-series with gradient fill) */
--area-gradient-opacity-top: 0.3;
--area-gradient-opacity-bottom: 0.02;
/* Smoothing curve tension (0 = linear, 1 = very smooth) */
--area-curve-tension: 0.4;
/* ===========================
STREAMGRAPH SPECIFIC
=========================== */
/* Stream layer fill */
--stream-fill-opacity: 1;
--stream-stroke-color: #fff;
--stream-stroke-width: 1;
/* Stream interaction */
--stream-dimmed-opacity: 0.25;
/* Stream labels */
--stream-label-size: 11;
/* ===========================
DOT CHART SPECIFIC
=========================== */
/* Dot sizing */
--dot-radius: 5px;
--dot-radius-hover: 7px;
/* Connector line (dumbbell) */
--dot-connector-width: 2.5;
--dot-connector-color: var(--color-text-disabled);
/* Row spacing */
--dot-row-height: 36px;
--dot-row-padding: 0.3;
/* Header positioning */
--dot-header-offset: 12px;
/* ===========================
COLOR TEMPERATURE PALETTE
=========================== */
/* Based on Kelvin color temperature scale
* Cold (blue) → Warm (amber)
* Useful for percentile bands, heat maps, diverging scales */
--temp-cold-10: #7AB8FF; /* 10000K - deep cold blue */
--temp-cold-9: #9CCAFF; /* 9000K - cold blue */
--temp-cold-8: #B8D9FF; /* 8000K - sky blue */
--temp-cold-7: #D6E8FF; /* 7000K - pale blue */
--temp-neutral: #F2F7FF; /* 6000K - cool white */
--temp-warm-5: #FFF1C1; /* 5000K - neutral daylight */
--temp-warm-4: #FFD27F; /* 4000K - warm white */
--temp-warm-3: #FFB347; /* 3000K - tungsten */
--temp-warm-2: #FF8C1A; /* 2000K - warm orange */
--temp-warm-1: #FF6A00; /* 1000K - deep amber */
/* ===========================
SCATTER PLOT / TRAJECTORY
=========================== */
/* Trail length (number of time units to show in trail) */
--scatter-trail-length: 5;
/* Trail styling */
--scatter-trail-width: 3;
--scatter-trail-width-hover: 4;
--scatter-trail-opacity: 0.7;
--scatter-trail-opacity-dimmed: 0.08;
/* Trail gradient (fade from start to end) */
--scatter-trail-gradient-start: 0.1;
--scatter-trail-gradient-end: 0.9;
/* Dot sizing */
--scatter-dot-radius: 6;
--scatter-dot-radius-hover: 10;
--scatter-dot-stroke-width: 2;
/* Start dot (trail origin marker) */
--scatter-start-dot-radius: 4;
--scatter-start-dot-stroke-width: 1.5;
--scatter-start-dot-opacity: 0.8;
/* Animation timing */
--scatter-animation-speed: 1000;
/* Quadrant chart */
--quadrant-line-width: 1.5;
--quadrant-bg-opacity: 0.08;
/* Density contour / KDE outlines (dark theme flips these to white-based) */
--contour-line-color: rgba(0, 0, 0, 0.15);
--kde-contour-line-color: rgba(0, 0, 0, 0.1);
/* ===========================
VOCABULARY FAMILIES (Release C)
=========================== */
/* Histogram */
--histogram-bar-gap: 1; /* px gap between bin bars */
--histogram-overlay-opacity: 0.55; /* overlay-series fill opacity */
/* Donut */
--donut-inner-ratio: 0.62; /* inner radius share; 0 = pie */
--donut-pad-angle: 0.008; /* radians between slices */
--donut-corner-radius: 2; /* px slice corner rounding */
/* Box plot */
--box-fill-opacity: 0.35; /* box body fill vs stroke */
--box-median-width: 2.5; /* median line stroke width */
--box-outlier-radius: 3; /* px outlier ring radius */
/* Calendar heatmap */
--calendar-cell-radius: 2; /* px cell corner rounding */
--calendar-month-gap: 3; /* px extra gutter at month starts */
--calendar-max-cell: 22; /* px step cap for the 7-col vertical layout */
/* Sankey */
--sankey-node-width: 12; /* px node bar width */
--sankey-node-padding: 12; /* px vertical gap between nodes */
--sankey-link-opacity: 0.3; /* link ribbon opacity (hover +0.25) */
--sankey-anim-duration: 900; /* ms each column's links take to draw */
--sankey-anim-pause: 300; /* ms the flow rests at a node before flowing on */
/* ===========================
BUMP CHART SPECIFIC
=========================== */
/* Layout */
--bump-margin-top: 30;
--bump-margin-bottom: 40;
--bump-label-gap: 10;
--bump-label-padding: 5;
--bump-axis-offset: 15;
/* Line styling */
--bump-line-width: 2.5;
--bump-line-width-hover: 3.5;
/* Dot styling */
--bump-dot-radius: 8;
--bump-dot-radius-hover: 10;
--bump-dot-stroke-width: 2;
--bump-rank-font-size: 10px;
/* Interaction states */
--bump-dimmed-opacity: 0.15;
--bump-transition-duration: 0.2s;
/* Animation */
--bump-animation-duration: 800;
--bump-stagger-delay: 100;
--bump-dot-fade-duration: 300;
/* ===========================
SEQUENTIAL COLOR SCALES (bars/heatmaps — createColorScale)
=========================== */
--scale-orange-lo: #fff5eb;
--scale-orange-hi: #ff6b35;
--scale-orange-red-hi: #d7191c;
--scale-blue-lo: #e0f3f8;
--scale-blue-hi: #4575b4;
--scale-teal-hi: #1a9988;
--scale-aqua-1: #a4d7e1;
--scale-aqua-2: #4ec1d4;
--scale-aqua-3: #0095b7;
--scale-aqua-4: #005e8b;
--scale-gray-lo: #f5f5f5;
--scale-gray-hi: #333333;
--scale-purple-1: #f3e5f5;
--scale-purple-2: #ce93d8;
--scale-purple-3: #ab47bc;
--scale-purple-4: #7b1fa2;
--scale-green-1: #e8f5e9;
--scale-green-2: #a5d6a7;
--scale-green-3: #66bb6a;
--scale-green-4: #2e7d32;
/* Diagonal band scales (Scatter.createDiagonal) — white center outward */
--scale-diag-green-1: #ffffff;
--scale-diag-green-2: #c6f6d5;
--scale-diag-green-3: #68d391;
--scale-diag-green-4: #38a169;
--scale-diag-red-1: #ffffff;
--scale-diag-red-2: #fed7d7;
--scale-diag-red-3: #fc8181;
--scale-diag-red-4: #e53e3e;
/* ===========================
BAR CHART SPECIFIC
=========================== */
/* Bar sizing */
--bar-height: 24px;
--bar-height-mini: 18px;
--bar-gap: 8px;
--bar-border-radius: 3px;
/* Zero baseline on mixed-sign bar charts (tracks the dark theme via the
underlying text token) */
--bar-zero-line-color: var(--color-text-primary);
--bar-zero-line-width: 1.5;
/* Gantt */
--gantt-bar-height: 18px;
--gantt-bar-gap: 6px;
--gantt-border-radius: 2px;
/* Waterfall connector hairlines (between consecutive bars) */
--waterfall-connector-color: rgba(0, 0, 0, 0.18);
/* Container */
--container-max-width: 660px;
/* Bar track (background) */
--bar-track-color: var(--color-border-row);
--bar-track-opacity: 0.5;
/* Label positioning */
--bar-label-gap: 8px;
--bar-value-padding: 6px;
--bar-inline-threshold: 0.35;
/* Lollipop variant */
--lollipop-stem-width: 2px;
--lollipop-dot-radius: 6px;
--lollipop-dot-radius-hover: 8px;
/* Bullet chart */
--bullet-range-opacity: 0.25;
--bullet-measure-height: 8px;
--bullet-marker-width: 3px;
--bullet-marker-height: 16px;
/* Animation */
--bar-animation-duration: 800ms;
--bar-stagger-delay: 50ms;
/* Row layout */
--bar-row-height: 32px;
--bar-category-width: 100px;
/* ===========================
STAT FORMATTING OPTIONS
=========================== */
/* Baseball batting average format: .345 instead of 0.345
* Use formatBaseballAvg() helper or set data-format="baseball-avg"
*
* JavaScript helper:
* function formatBaseballAvg(value) {
* return value.toFixed(3).replace(/^0\./, '.');
* }
*/
}
/* ===========================
INSTAGRAM EXPORT TIER
===========================
Opt-in via , paired with `size: 'instagram'`
in chart config (the SIZE_PRESETS geometry). Scales the text, stroke,
marker, and annotation tokens for 1080px social-feed posters that are
viewed at phone size — roughly 2.4x the screen-reading defaults. Colors
are untouched, so it composes with the dark theme. Same runtime contract
as dark mode: builders resolve tokens at render, so flipping the
attribute needs a re-render (ChartFactory.rerenderAll()). */
:root[data-size="instagram"] {
/* Typography */
--font-size-xs: 22px;
--font-size-sm: 25px;
--font-size-base: 27px;
--font-size-md: 29px;
--font-size-lg: 32px;
--font-size-xl: 35px;
--font-size-title: 64px;
--font-size-subtitle: 32px;
--shell-title-size: 38px;
/* Marks */
--line-stroke-width: 5;
--area-stroke-width: 4;
--line-dot-stroke-width: 4;
--bar-height: 56;
--bar-gap: 18;
/* Annotations */
--annotation-title-size: 34px;
--annotation-event-font-size: 24px;
--annotation-event-band-offset: 48;
--annotation-event-tick-height: 18;
--annotation-leader-threshold: 30;
/* Slope label dodge gaps track the scaled label text */
--slope-label-min-gap: 34;
--slope-label-min-gap-stacked: 72;
/* Bump chart marks at poster weight */
--bump-line-width: 6;
--bump-line-width-hover: 8;
--bump-dot-radius: 17;
--bump-dot-radius-hover: 20;
--bump-dot-stroke-width: 4;
--bump-rank-font-size: 20px;
--bump-label-gap: 16;
--bump-axis-offset: 26;
--bump-margin-top: 40;
--bump-margin-bottom: 60;
}
/* ===========================
DARK THEME
===========================
Opt-in via . Only color-bearing tokens are
overridden; spacing, sizing, and opacity tokens carry over.
Builders resolve tokens live at render time (getCSSVar reads
documentElement), so switching themes at runtime requires a re-render:
call chart.rerender() on each chart facade (tables: table.update(data)).
CSS-styled surfaces (table chrome, tooltip shell, containers) restyle
immediately without one. */
:root[data-theme="dark"] {
/* Text — --color-black is the strongest ink, not literal black */
--color-black: #f4f4f5;
--color-text-primary: #e4e4e7;
--color-text-muted: #a1a1aa;
--color-text-subtle: #8b8b93;
--color-text-faint: #71717a;
--color-text-disabled: #52525b;
/* Backgrounds */
--color-bg-body: #101012;
--color-bg-container: #1b1b1e;
--color-bg-hover: #232327;
--color-bg-highlight: #2a2a2f;
/* Borders */
--color-border-header: #e4e4e7;
--color-border-row: #2a2a2e;
--color-border-light: #333338;
--color-border-footer: #2f2f34;
--color-border-tooltip: #3f3f46;
/* Shadows */
--shadow-container: 0 1px 3px rgba(0, 0, 0, 0.6);
--shadow-tooltip: 0 4px 14px rgba(0, 0, 0, 0.6);
/* Chart palette — brightened for dark surfaces */
--chart-primary: #60a5fa;
--chart-primary-light: rgba(96, 165, 250, 0.35);
--chart-primary-faint: rgba(96, 165, 250, 0.12);
--chart-secondary: #4ade80;
--chart-tertiary: #fb923c;
--chart-green: #4ade80;
--chart-lime: #a3e635;
--chart-orange: #fb923c;
--chart-purple: #c084fc;
--chart-purple-light: rgba(192, 132, 252, 0.4);
--chart-purple-faint: rgba(192, 132, 252, 0.08);
--chart-red: #f87171;
/* Multi-series palette — lighter gray is the more prominent one on dark */
--chart-series-1: #64748b;
--chart-series-2: #94a3b8;
/* Neutral/gray for cumulative/baseline lines */
--chart-neutral: #9ca3af;
--chart-neutral-light: rgba(156, 163, 175, 0.4);
--chart-neutral-faint: rgba(156, 163, 175, 0.08);
/* Slope */
--slope-muted-color: #52525b;
--slope-band-1: #2c1d1d;
--slope-band-2: #2b2717;
--slope-band-3: #16281c;
--slope-band-4: #17222f;
/* Misc structural strokes */
--stream-stroke-color: #1b1b1e;
--waterfall-connector-color: #52525b;
--dot-connector-color: #3f3f46;
--annotation-event-guide-color: #52525b;
--contour-line-color: rgba(255, 255, 255, 0.15);
--kde-contour-line-color: rgba(255, 255, 255, 0.12);
/* Categorical series palette — Set2, lifted for dark backgrounds */
--area-color-1: #74d0b3;
--area-color-2: #ff9e78;
--area-color-3: #a2b3dc;
--area-color-4: #ef9dd0;
--area-color-5: #b6e268;
--area-color-6: #ffe45c;
--area-color-7: #ecd2a8;
--area-color-8: #c6c6c6;
/* Temperature palette — extremes stay bright, middle fades to surface */
--temp-cold-10: #3f7fd1;
--temp-cold-9: #38689f;
--temp-cold-8: #2f5377;
--temp-cold-7: #263e52;
--temp-neutral: #26262b;
--temp-warm-5: #4a3a20;
--temp-warm-4: #6e4f22;
--temp-warm-3: #9c6a25;
--temp-warm-2: #d07f1f;
--temp-warm-1: #ff8a3d;
/* Sequential scales — lo ends re-anchor from near-white to surface-tinted
darks so low values fade into the background, high values stay vivid */
--scale-orange-lo: #2e2018;
--scale-orange-hi: #ff8a5c;
--scale-orange-red-hi: #e35d5d;
--scale-blue-lo: #16202c;
--scale-blue-hi: #6ea8dc;
--scale-teal-hi: #34b3a0;
--scale-aqua-1: #1a3a42;
--scale-aqua-2: #16606e;
--scale-aqua-3: #1d92ab;
--scale-aqua-4: #5cc6da;
--scale-gray-lo: #232326;
--scale-gray-hi: #d4d4d8;
--scale-purple-1: #241a2b;
--scale-purple-2: #4a3357;
--scale-purple-3: #7b57a0;
--scale-purple-4: #b58ae0;
--scale-green-1: #16241a;
--scale-green-2: #2f5138;
--scale-green-3: #4f8c58;
--scale-green-4: #7ac47f;
--scale-diag-green-1: #1b1b1e;
--scale-diag-green-2: #1d3524;
--scale-diag-green-3: #2f6b40;
--scale-diag-green-4: #4caf6d;
--scale-diag-red-1: #1b1b1e;
--scale-diag-red-2: #3a2023;
--scale-diag-red-3: #7a3b3b;
--scale-diag-red-4: #c25959;
/* Chart story — band lifts off the dark container surface; accent follows
--chart-primary automatically, and the panel wash re-mixes from it */
--story-band-bg: #2a2a2f;
--story-band-text: #e4e4e7;
--story-band-label: #a1a1aa;
}