/* ════════════════════════════════════════════════════════════════════════════ ATLAS THEME — vision fork (branch vision/atlas-dark-26as, Jul 2026) ════════════════════════════════════════════════════════════════════════════ Scoped re-map of the shared design tokens onto UP's Atlas DS ramps (atlas.urbanpiper.com — the same tokens the Global Partner Dashboard uses). Atlas ships LIGHT-only; this file supplies BOTH: • DARK — the Atlance dark derivation, on :root (the default) • LIGHT — the real Atlas light palette, on :root[data-theme="light"] DNA kept across both: up-* colour ramps, Source Sans body + DM Serif Text display numerals + Fira Mono identifiers, tinted-pill grammar. HOW MODULES USE IT @import '../../../shared/ui/tokens.css'; @import '../../../shared/ui/atlas-theme.css'; Both themes are ATTRIBUTE-scoped ([data-theme=dark|light]) — deliberately, so they out-specify tokens.css's bare :root AND never get merged into it by the CSS minifier (a bare :root override silently loses that merge). Every module MUST therefore set data-theme on : • static-dark surface (the hub) → static • Atlas module (all of them) → toggled via the shared ThemeToggle (v1.64) — dark default, choice persists (No data-theme at all falls back to tokens.css's own dark, not Atlas dark.) Conscious vision-fork exception to the no-local-palette rule — it re-maps EXISTING shared token names (no new --atlas-* alias family). Dies or gets promoted to a real theme when the try-on verdict lands. Reference: (..)lab/atlas-design-system/ (up-atlas-tokens.css + artifacts). ════════════════════════════════════════════════════════════════════════════ */ /* ── DARK — Atlance derivation of Atlas, cool blue-biased neutrals ── */ :root[data-theme="dark"] { color-scheme: dark; /* neutrals — TRUE BLACK base (Atlance black, not Atlas grey), with subtle cool blue-biased elevation so panels lift just enough off the black */ --bg-base: #000000; --bg-surface: #131519; --bg-elevated: #1c1e24; --bg-popup: #0d0e11; --bg-inset: #000000; --bg-hover: #1a1c21; --bg-active: #212430; --text-primary: #f2f3f5; --text-secondary: #9ba0a8; --text-muted: #6f747d; --text-tertiary: #6f747d; --text-dim: #6f747d; --text-faint: #565b63; --border-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.22); /* Atlas blue (up-blue ramp) — up-blue-35 leads on dark (reads bright) */ --accent: #587af6; /* up-blue-35 */ --accent-hover: #3b5feb; /* up-blue-40 */ --accent-active: #2543b6; /* up-blue-50 */ --accent-tint: rgba(88, 122, 246, 0.14); --accent-tint-border: rgba(88, 122, 246, 0.32); --accent-light: #9fb3ff; /* up-blue-30 */ --brand-primary: #587af6; --brand-secondary: #3b5feb; --brand-light: #9fb3ff; --brand-lighter: #c3cfff; --brand-glow: rgba(88, 122, 246, 0.15); --brand-glow-strong: rgba(88, 122, 246, 0.3); --border-focus: #587af6; /* semantics on the Atlas ramps — vivid ramp values read on dark */ --success: #2ecc71; --color-positive: #2ecc71; /* up-green-40 */ --error: #e06767; --color-negative: #e06767; /* up-red-40 */ --warning: #ffc045; --color-caution: #ffc045; /* up-yellow-40 */ --info: #587af6; --success-muted: rgba(46, 204, 113, 0.15); --success-dim: rgba(46, 204, 113, 0.10); --success-border: rgba(46, 204, 113, 0.28); --error-muted: rgba(224, 103, 103, 0.15); --error-dim: rgba(224, 103, 103, 0.10); --error-border: rgba(224, 103, 103, 0.28); --warning-muted: rgba(255, 192, 69, 0.15); --warning-dim: rgba(255, 192, 69, 0.08); --warning-border: rgba(255, 192, 69, 0.28); --info-muted: rgba(88, 122, 246, 0.15); --info-dim: rgba(88, 122, 246, 0.10); --info-border: rgba(88, 122, 246, 0.28); --color-positive-12: rgba(46, 204, 113, 0.12); --color-negative-12: rgba(224, 103, 103, 0.12); --color-caution-12: rgba(255, 192, 69, 0.12); /* Status-chip pairs — dark keeps the register's own voice (Horizon publishes no dark table); the light block carries the Horizon-verbatim values. */ --chip-success-ink: var(--success); --chip-success-fill: var(--success-dim); --chip-warning-ink: var(--warning); --chip-warning-fill: rgba(255, 192, 69, 0.12); /* bespoke pill hue (26AS "not in 26AS") — up-purple, no semantic slot */ --pill-purple: #b47fdc; --pill-purple-bg: rgba(144, 72, 200, 0.16); /* Atlas type pairing — Source Sans reads, DM Serif carries money, Fira Mono carries identifiers */ --font-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'DM Serif Text', Georgia, serif; --font-mono: 'Fira Mono', 'JetBrains Mono', monospace; /* Chart series on the Atlas ramps (exp/atlas-dark-ops) — LITERAL values only: charts/theme.js reads these via getComputedStyle for Recharts. Ordered for max adjacent distinction; no gold (Atlas has no gold). */ --chart-1: #587af6; /* up-blue-35 */ --chart-2: #20b2aa; /* up-teal-50 */ --chart-3: #fd9d52; /* up-orange-40 */ --chart-4: #b47fdc; /* up-purple, lifted for dark */ --chart-5: #2ecc71; /* up-green-40 */ --chart-6: #9fb3ff; /* up-blue-30 */ --chart-grid: rgba(255, 255, 255, 0.05); --chart-axis: #6f747d; /* Domain palettes on the Atlas ramps (post-merge pass, Jul 25) — severity escalates yellow → orange → red; the terminal bucket takes Atlas's bright-red so the worst number stays the loudest thing on the row. */ --aging-current: #f2f2f2; --aging-1-30: #ffe55b; /* up-yellow-35 */ --aging-31-60: #ffc045; /* up-yellow-40 */ --aging-61-90: #fd9d52; /* up-orange-40 */ --aging-91-120: #e06767; /* up-red-40 */ --aging-120-plus: #ff425c; /* up-bright-red-50 */ --segment-enterprise: #b47fdc; /* up-purple, lifted for dark */ --segment-sme: #587af6; /* up-blue-35 */ --segment-smb: #2ecc71; /* up-green-40 */ --segment-partner: #fd9d52; /* up-orange-40 */ --segment-aggregator: #88d9f8; /* up-light-blue-50 — teal stays MENA's */ /* Regions repainted Aug 14 2026 — see tokens.css for why (three of four used to be another token's exact hex; USA was --accent, on 22 modules). True black lets these run bright: all four clear AA comfortably. */ --region-india: #f472b6; /* pink — 7.93:1 on #000 */ --region-usa: #818cf8; /* indigo — 7.04:1 */ --region-uk: #67e8f9; /* cyan — 14.49:1 */ --region-mena: #bef264; /* lime — 16.07:1 */ /* currency-* alias the regions and inherit those automatically; SAR has no region of its own, so it is the only one that needs restating per theme. */ --currency-sar: #b47fdc; /* up-purple-50 */ --color-accent-warm: #fd9d52; } /* ── LIGHT — the real Atlas palette (white surfaces on up-black-5 canvas) ────── Semantic TEXT tones step down the ramp (green-50 / red-60 / yellow-70) so they stay legible on white; tint FILLS keep the vivid ramp at low alpha. Blue action uses up-blue-40 (blue-35 is too light on white). ─────────────────────────── */ :root[data-theme="light"] { color-scheme: light; /* neutrals — Atlas: up-black-5 canvas, white cards, up-black text ramp */ --bg-base: #f5f5f5; /* up-black-5 */ --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-popup: #ffffff; --bg-inset: #f0f1f3; --bg-hover: #eef0f2; --bg-active: #e6e8eb; --text-primary: #171717; /* up-black-100 */ --text-secondary: #4c4f55; /* ~up-black-70 */ --text-muted: #686d75; /* a step past #6f747d — that one sat at 4.31:1 on the #f5f5f5 canvas; this clears 4.5 on both */ --text-tertiary: #8a8a8a; /* up-black-50 */ --text-dim: #8a8a8a; /* up-black-50 */ --text-faint: #aaaaaa; /* up-black-40 */ --border-subtle: rgba(0, 0, 0, 0.07); --border-default: rgba(0, 0, 0, 0.11); --border-strong: rgba(0, 0, 0, 0.22); /* white-alpha → black-alpha, so shared-component hairlines / hovers / dividers (which are built on --white-a*) stay visible on a white surface */ --white-a2: rgba(0, 0, 0, 0.02); --white-a3: rgba(0, 0, 0, 0.03); --white-a4: rgba(0, 0, 0, 0.035); --white-a6: rgba(0, 0, 0, 0.05); --white-a8: rgba(0, 0, 0, 0.06); --white-a10: rgba(0, 0, 0, 0.07); --white-a12: rgba(0, 0, 0, 0.09); --white-a15: rgba(0, 0, 0, 0.11); --white-a22: rgba(0, 0, 0, 0.16); /* gray ramp MIRRORED (light review, Aug 15 2026) — tokens.css's --gray-* is a dark-canvas ink scale (300 = prominent … 700 = very faint, 800 = surface). Left unmapped, gray-300 ink lands at 1.48:1 on white (AR's not-due amounts were invisible). The flip reuses the ramp's own values reversed around the gray-500 pivot, so every consumer keeps its RELATIVE emphasis: prominent 14:1→11:1 · secondary 7.7→8.3 · muted ~4.5 both ways · faint 2.5→2.4 · very-faint 1.9→1.9 · surface flips to light panel. */ --gray-300: #3f3f46; --gray-400: #52525b; --gray-500: #71717a; /* pivot — same role on both canvases */ --gray-600: #a1a1aa; --gray-700: #b9b9bf; --gray-800: #e4e4e7; --gray-900: #f4f4f5; /* depth recipe + shadows relit for a light canvas (light review, Aug 15 2026). tokens.css's recipe assumes black: --well-bg is a 38% black wash (read as a dark pill on white — every DataGrid search + SegmentedControl track), and the shadow stack leans on white hairline rings (invisible on white) over 40-70% black drops (far too heavy). Same recipe, light constants: wells go a step darker than the surface, raises get a soft drop + black-alpha hairline. */ --well-bg: rgba(0, 0, 0, 0.055); --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.055); --shadow-well-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-well-focus: var(--shadow-well-inset), inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-tint); --shadow-well-error: var(--shadow-well-inset), inset 0 0 0 1px var(--error), 0 0 0 3px var(--error-muted); --shadow-raise: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.07); --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.07); --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.07); --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 24px -4px rgba(0, 0, 0, 0.14), 0 4px 8px -4px rgba(0, 0, 0, 0.08); --shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.12); /* Button raises + DataGrid sheet/pin (v1.67.0): the same recipe with light constants — white top sheen, ≤18% drops, black-alpha hairlines. Before this the button shadows lived as literals in button.css and kept their 40-45% dark drops on the white page. */ --shadow-raise-color: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-raise-color-active: inset 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-raise-neutral: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.08); --shadow-raise-neutral-hover: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.12); --shadow-raise-neutral-active: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08); --shadow-sheet: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-pin: 10px 0 12px -8px rgba(0, 0, 0, 0.12); --shadow-rail: 32px 0 64px -24px rgba(0, 0, 0, 0.18); /* Atlas blue on white — up-blue-40 leads, darker tones for hover/active */ --accent: #3b5feb; /* up-blue-40 */ --accent-hover: #2543b6; /* up-blue-50 */ --accent-active: #004aac; /* up-blue-60 */ --accent-tint: rgba(59, 95, 235, 0.09); --accent-tint-border: rgba(59, 95, 235, 0.26); --accent-light: #2543b6; /* up-blue-50 — legible "accent" text on light tint */ --brand-primary: #3b5feb; --brand-secondary: #2543b6; --brand-light: #587af6; /* The token's ROLE is brand-emphasis TEXT on tinted fills (Select's selected item, filter chips). Lighter-than-brand only works on dark; on light it was #9fb3ff — pale periwinkle on a pale wash, unreadable (owner caught it on the order form's Country select, Aug 21 2026). Light needs DARKER-than-brand. */ --brand-lighter: #2543b6; /* up-blue-50 */ --brand-glow: rgba(59, 95, 235, 0.12); --brand-glow-strong: rgba(59, 95, 235, 0.22); --border-focus: #3b5feb; /* semantics — darker ramp values for text on white; tint fills stay coloured. Green is the ramp's weak lane: green-50 measured 3.42:1 as ink (audit, Aug 15) and the ramp jumps straight to green-70, so the ink rung is a synthesized green-60 — same hue, 4.9:1. Red-60 and yellow-70 clear AA. */ --success: #0a8420; --color-positive: #0a8420; /* ~up-green-60 (synth) */ --error: #c23737; --color-negative: #c23737; /* up-red-60 */ --warning: #846c18; --color-caution: #846c18; /* up-yellow-70 (legible on white) */ --info: #3b5feb; --success-muted: rgba(13, 161, 37, 0.13); --success-dim: rgba(13, 161, 37, 0.08); --success-border: rgba(13, 161, 37, 0.26); --error-muted: rgba(194, 55, 55, 0.13); --error-dim: rgba(194, 55, 55, 0.08); --error-border: rgba(194, 55, 55, 0.26); --warning-muted: rgba(255, 192, 69, 0.22); --warning-dim: rgba(255, 192, 69, 0.14); --warning-border: rgba(232, 194, 52, 0.42); --info-muted: rgba(59, 95, 235, 0.12); --info-dim: rgba(59, 95, 235, 0.08); --info-border: rgba(59, 95, 235, 0.26); --color-positive-12: rgba(13, 161, 37, 0.12); --color-negative-12: rgba(194, 55, 55, 0.12); --color-caution-12: rgba(168, 135, 15, 0.14); /* Status-chip pairs, verbatim from Horizon tokens.md §Status chips. The generic ink rungs above stop at the synth green-60, which composites to 4.41:1 on a green tint — under AA for 12px/600 chip text. Chips take the component's own published pair (green-70 ink, 5.86:1 on its fill). */ --chip-success-ink: #0b6e1b; /* up-green-70 — Horizon color-chip-success-text */ --chip-success-fill: #ecf7f0; /* Horizon color-chip-success-bg */ --chip-warning-ink: #846c18; /* up-yellow-70 = --color-caution */ --chip-warning-fill: #fef6e9; /* Horizon color-chip-warning-bg — 4.73:1 under its ink */ /* bespoke pill hue — up-purple-50 reads on white */ --pill-purple: #9048c8; --pill-purple-bg: rgba(144, 72, 200, 0.12); /* Atlas type pairing — same faces both themes (must be set here too, else --font-display is undefined in light and serif money falls back to sans) */ --font-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'DM Serif Text', Georgia, serif; --font-mono: 'Fira Mono', 'JetBrains Mono', monospace; /* Chart series on the Atlas ramps — light rungs step DOWN for white canvas (playbook: fills can stay, colour-as-ink must darken). LITERAL values only. */ --chart-1: #3b5feb; /* up-blue-40 */ --chart-2: #20b2aa; /* up-teal-50 */ --chart-3: #fd9d52; /* up-orange-40 */ --chart-4: #9048c8; /* up-purple-50 */ --chart-5: #0da125; /* up-green-50 */ --chart-6: #2543b6; /* up-blue-50 */ --chart-grid: rgba(0, 0, 0, 0.06); --chart-axis: #8a8a8a; /* Aging is INK in every live consumer (AR matrix amounts, shared AgingBadge text, Worklist chips) — the stacked-bar fills are hardcoded chart series. The first light cut kept fill-grade rungs and measured 1.6–2.1:1 as text (light review, Aug 15 2026), so these climb the ramp per the playbook rule: colour-as-ink darkens. All ≥4.5:1 on white; escalation carried by hue (olive → amber → burnt orange → red) with the reds also darkening. Atlas has no dark orange rung — 31-60/61-90 are synthesized to hold the escalation legible; yellow-70 is shared with --warning (same caution lane). */ --aging-current: #171717; --aging-1-30: #846c18; /* up-yellow-70 — 5.0:1 */ --aging-31-60: #b45309; /* dark amber (no Atlas rung) — 4.9:1 */ --aging-61-90: #c2410c; /* burnt orange (no Atlas rung) — 5.1:1 */ --aging-91-120: #c23737; /* up-red-60 — 5.4:1 */ --aging-120-plus: #b02b2b; /* up-red-70 — 6.5:1 */ /* Segments are INK in their live consumers (AR matrix row labels) and the first cut kept fill-grade rungs: partner 2.07:1, aggregator 2.92:1, smb 3.42:1 (audit, Aug 15). Ink climbs the ramp; smb keeps aliasing --success (as it always has in both themes), partner keeps sharing the warm lane with --color-accent-warm (ditto). */ --segment-enterprise: #9048c8; /* up-purple-50 — 5.3:1 */ --segment-sme: #3b5feb; /* up-blue-40 — 5.2:1 */ --segment-smb: #0a8420; /* ~up-green-60 (synth) — 4.9:1 */ --segment-partner: #bb4d00; /* dark burnt orange (no Atlas rung) — 4.9:1 */ --segment-aggregator: #0f766e; /* deep teal (no Atlas rung) — 5.6:1 */ /* Same four hues, dark end of each ramp — #f5f5f5 needs the opposite end of the scale from true black. All clear AA on the light canvas. Reviewed on screen Aug 15 2026 (light-theme pass): eyeballed on AR's region cards + donut and Bank Import's column accents/currency pills — the four read distinct and on-identity in light. */ --region-india: #be185d; /* 5.54:1 on #f5f5f5 */ --region-usa: #4f46e5; /* 5.77:1 */ --region-uk: #0e7490; /* 4.91:1 */ --region-mena: #4d7c0f; /* 4.58:1 */ /* Raw hues + the Flow family as INK on white (v1.69.0) — the dark values are fill-grade (amber 2.2:1, pink 3.9:1, emerald 2.5:1, cyan 1.6:1); light climbs each ramp to AA. */ --amber: #b45309; /* amber-700 — the aging-31-60 light rung */ --pink: #be185d; /* = --region-india light */ --flow-healthy: var(--success); /* ~up-green-60 */ --flow-phase-notify: #0e7490; /* = --region-uk light */ --currency-sar: #9048c8; /* up-purple-60 — darker, AA on white */ --color-accent-warm: #bb4d00; /* ink duty (Stripe churn CONTRACTION measured 2.07:1 at the fill rung) — shares the lane with --segment-partner, as in dark */ } /* Brand mark: the SVG spokes + outer dots paint `--brand-ivory` (a cream tuned for the dark header — it vanishes on the white light header, leaving only the gold centre dot). Remap the token to the ink, LIGHT ONLY — dark stays exactly as it is. (v1.67.0: was a `g[stroke]`/`g[fill]` selector override while the SVG carried a hex; the mark now paints the token itself.) */ :root[data-theme="light"] { --brand-ivory: var(--text-primary); } /* ── DANGER KEEPS ITS BITE (doctrine guard, DESIGN.md Jul 25) ───────────────── The soft up-red-40 (#e06767) is the dark theme's error INK — right for text and pills, sub-AA and under-loud as a button FILL (white on #e06767 ≈ 2.9:1). Danger FILLS therefore use Atlas's own action red, up-red-50 (#d64949, white ≈ 4.5:1) — the playbook rule: colour-as-ink climbs the ramp, fills don't. Local custom-property override so .btn-danger's bg/border/hover color-mix and .mp-raise-danger's whole raise recipe follow from one declaration. */ :root[data-theme="dark"] .btn-danger, :root[data-theme="dark"] .mp-raise-danger { --error: #d64949; --raise-c: #d64949; }