@actioneer/ads 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -4,27 +4,22 @@
 @import "tw-shimmer";
 @import "tw-animate-css";
 
-/* ---- Aribau Grotesk ---- */
+/* ---- Fonts: Geist (bundled); Season Mix headings are product-supplied ---- */
 @import "@fontsource-variable/jetbrains-mono/wght.css";
 
-/* Aribau Grotesk — ADS UI typeface.
-   TWO physical faces, both served compressed (woff2):
-   • Regular → `font-normal` (weight 100–499)
-   • Medium  → `font-medium` (weight 500)
-   There is NO semibold or bold face. The broad face range keeps legacy
-   consumers on the real Medium file, while ADS source uses only 400 and 500.
-   `font-synthesis-weight: none` (index.css) blocks faux bolding. */
-@font-face {
-  font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-regular.woff2") format("woff2");
-  font-weight: 100 499;
-  font-style: normal;
-  font-display: swap;
-}
+/* Geist — ADS body and UI typeface (SIL Open Font License, bundled).
+   One variable face covers every weight; ADS source uses only Regular (400)
+   and Medium (500). `font-synthesis-weight: none` (index.css) blocks faux
+   bolding.
+
+   Season Mix — ADS heading typeface (`--font-heading`). It is a licensed
+   font, so ADS does NOT bundle or redistribute it: each product declares its
+   own `@font-face { font-family: "Season Mix"; … }` from its licensed file.
+   Without it, headings fall back to the platform serif. */
 @font-face {
-  font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-medium.woff2") format("woff2");
-  font-weight: 500 900;
+  font-family: "Geist";
+  src: url("./fonts/geist-variable.woff2") format("woff2");
+  font-weight: 100 900;
   font-style: normal;
   font-display: swap;
 }
@@ -40,16 +35,20 @@
  * ============================================================
  *  ADS 1.0 — Design Tokens
  *  Palette: neutral greys + product teal
- *  Typeface: Aribau Grotesk
+ *  Typefaces: Geist (body and UI), Season Mix (headings)
  * ============================================================
  */
 @theme {
   /* ---- Typography ----
-     One brand typeface (Regular + Medium). Figures stay in Aribau Grotesk with
-     `tabular-nums` (enabled globally in index.css); only literal source code
-     steps to the mono stack. */
-  --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
-    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+     Two families: Geist for body, labels, controls, rows and data values
+     (Regular + Medium), and Season Mix for heading roles — page, drawer,
+     modal, section and chart titles, and every h1–h6 / [role=heading]
+     (index.css applies it). Figures stay in Geist with `tabular-nums`
+     (enabled globally in index.css); only literal source code steps to the
+     mono stack. Season Mix is licensed and not bundled (see fonts.css). */
+  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  --font-heading: "Season Mix", serif;
 
   /* Source code only (CodeBlock, inline Code). JetBrains Mono is bundled so
      code renders consistently across platforms. Never use it for UI copy or
@@ -57,27 +56,42 @@
   --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular,
     "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
 
-  /* ---- Type scale ---- seven canonical steps: XS · S · M · L · XL · 2XL · 3XL.
-     Roles follow the agent workflow. Root stays 16px so spacing is unaffected. */
-  --text-xs: 0.625rem;     /* 10px · noninteractive micro metadata */
-  --text-xs--line-height: 0.875rem; /* 14px */
-  --text-s: 0.75rem;       /* 12px · compact controls, table headers and kickers */
-  --text-s--line-height: 1rem; /* 16px */
-  --text-m: 0.875rem;      /* 14px · body, table cells, form labels and controls */
-  --text-m--line-height: 1.25rem; /* 20px */
-  --text-l: 1rem;          /* 16px · tabs and section titles */
-  --text-l--line-height: 1.375rem; /* 22px */
-  --text-xl: 1.125rem;     /* 18px · metric values and subtitles */
-  --text-xl--line-height: 1.5rem; /* 24px */
-  --text-2xl: 1.5rem;      /* 24px · page titles */
-  --text-2xl--line-height: 2rem; /* 32px */
-  --text-3xl: 2rem;        /* 32px · large data display */
-  --text-3xl--line-height: 2.5rem; /* 40px */
+  /* ---- Type scale ---- the Radix Themes scale (user-mandated, 2026-11-14):
+     nine steps, each with its own line height and optical tracking (larger
+     steps tighten, the smallest opens slightly). ADS names map one step up
+     from the old 14px-body scale so everyday text reads at 16px:
+       XS = 1 · S = 2 · M = 3 · L = 4 · XL = 5 · 2XL = 6 · 3XL = 7 · 4XL = 8 · 5XL = 9
+     Root stays 16px so spacing is unaffected. */
+  --text-xs: 0.75rem;      /* 12px · micro metadata, kickers, axis ticks, pagination */
+  --text-xs--line-height: 1rem; /* 16px */
+  --text-xs--letter-spacing: 0.0025em;
+  --text-s: 0.875rem;      /* 14px · secondary metadata, chips, table headers, compact controls */
+  --text-s--line-height: 1.25rem; /* 20px */
+  --text-s--letter-spacing: 0em;
+  --text-m: 1rem;          /* 16px · body, table cells, form labels, controls and tabs */
+  --text-m--line-height: 1.5rem; /* 24px */
+  --text-m--letter-spacing: 0em;
+  --text-l: 1.125rem;      /* 18px · section and card titles */
+  --text-l--line-height: 1.625rem; /* 26px */
+  --text-l--letter-spacing: -0.0025em;
+  --text-xl: 1.25rem;      /* 20px · page titles and breadcrumbs */
+  --text-xl--line-height: 1.75rem; /* 28px */
+  --text-xl--letter-spacing: -0.005em;
+  --text-2xl: 1.5rem;      /* 24px · onboarding and empty-state headlines */
+  --text-2xl--line-height: 1.875rem; /* 30px */
+  --text-2xl--letter-spacing: -0.00625em;
+  --text-3xl: 1.75rem;     /* 28px · detail-panel and tile metrics */
+  --text-3xl--line-height: 2.25rem; /* 36px */
+  --text-3xl--letter-spacing: -0.0075em;
+  --text-4xl: 2.1875rem;   /* 35px · stat-card numbers */
+  --text-4xl--line-height: 2.5rem; /* 40px */
+  --text-4xl--letter-spacing: -0.01em;
+  --text-5xl: 3.75rem;     /* 60px · display numbers */
+  --text-5xl--line-height: 3.75rem; /* 60px */
+  --text-5xl--letter-spacing: -0.025em;
 
   /* This is the complete ADS scale. Remove Tailwind's larger default steps so
-     Storybook and product code cannot silently introduce an eighth size. */
-  --text-4xl: initial;
-  --text-5xl: initial;
+     Storybook and product code cannot silently introduce a tenth size. */
   --text-6xl: initial;
   --text-7xl: initial;
   --text-8xl: initial;
@@ -243,12 +257,19 @@
   /* Brand mark and artifact canvas wash share the product teal. */
   --color-brand-mark: var(--brand);
 
-  /* ---- Radii ---- four canonical steps: XS · S · M · L.
+  /* ---- Radii ---- four control steps (XS · S · M · L) plus two
+     surface radii (card, window).
      M (6px) is the default corner radius. */
   --radius-xs: 0.125rem;  /*  2px · micro details */
   --radius-s: 0.25rem;    /*  4px · compact controls */
   --radius-m: 0.375rem;   /*  6px · default controls and surfaces */
-  --radius-l: 0.5rem;     /*  8px · menus, cards, and large surfaces */
+  --radius-l: 0.5rem;     /*  8px · menus, popovers and large controls */
+
+  /* Surface radii (user-mandated 2026-11-12, the window panel style):
+     resting cards (stat, chart, connector) and the app window that holds
+     the sidebar and the page. Controls never use these. */
+  --radius-card: 0.875rem;   /* 14px · cards that rest on a white page */
+  --radius-window: 1.125rem; /* 18px · the app window (sidebar + page) */
 
   /* Compatibility aliases preserve existing ADS utilities. */
   --radius-sm: var(--radius-s);
@@ -267,7 +288,9 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- five shadows, nothing else (ADS 1.0.8).
+  /* ---- Elevation ---- eight shadows, nothing else (ADS 1.0.10): flat,
+     two floating levels, two table hints, two resting surfaces and the
+     active sidebar item (below).
      A shadow means "this layer floats above the page". Everything that sits
      in the page — cards, panels, chips, buttons, tabs, fields — is flat and
      reads by fill or border. Neutral WG12 ink (rgb 32 32 32); each floating
@@ -287,6 +310,17 @@
   --shadow-table-smudge-left: 8px 0 24px -14px rgb(32 32 32 / 0.05);
   --shadow-table-smudge-right: -8px 0 24px -14px rgb(32 32 32 / 0.05);
 
+  /* Resting surfaces (user-mandated 2026-11-12). Not "floating": a soft,
+     barely-there lift that, with the WG4 hairline, sets a card or the app
+     window off its ground. Only Card (and stat/chart cards built on it) and
+     the app window carry these; panels, rows, chips and controls stay flat. */
+  --shadow-card: 0 1px 2px rgb(32 32 32 / 0.04), 0 8px 24px -12px rgb(32 32 32 / 0.10);
+  --shadow-window: 0 1px 2px rgb(32 32 32 / 0.05), 0 24px 48px -24px rgb(32 32 32 / 0.18);
+  /* The active sidebar item (user-mandated 2026-11-12): its White fill lifts
+     off the WG2 rail with a small, tight shadow so "you are here" reads at a
+     glance. Sidebar active rows only; hover stays flat. */
+  --shadow-nav-active: 0 1px 2px rgb(32 32 32 / 0.08), 0 4px 12px -4px rgb(32 32 32 / 0.14);
+
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
   --sidebar-width-sm: 3.5rem; /* 56px — collapsed icon rail */
@@ -303,6 +337,8 @@
   --card-padding: 1.25rem; /* 20px — inner padding for cards */
   --connector-card-max: 30rem; /* 480px — max column width for connector-card grids (cap; no min) */
   --connector-card-min: 20rem; /* 320px — min column width for auto-fill connector-card grids (cards stretch to 1fr; column count follows the container) */
+  --modal-height: 40rem; /* 640px — every md/lg/xl Modal is this tall; header + footer stay put and ModalBody scrolls */
+  --modal-height-sm: 20rem; /* 320px — the fixed height of a sm (confirmation) Modal */
 
   /* ---- Chat (Ask Actioneer / assistant-ui) ---- */
   --thread-max-width: 44rem; /* chat column cap — readable prose measure, all panes */
@@ -329,18 +365,21 @@
      "good" and red reads "bad" even when the series is just a named entity,
      so a category key must never imply one. Green/red stay reserved for
      genuinely semantic states (success badges, danger alerts, a delta the
-     CALLER has judged). Blue leads as the focal series; purple, orange, cyan
-     and amber extend; grey closes as the sixth and doubles as the
-     de-emphasis tone.
+     CALLER has judged). Vivid teal leads as the focal series; golden
+     yellow, purple, cerulean and indigo navy extend; grey closes as the sixth
+     and doubles as the de-emphasis tone.
 
      Explicit hexes (not var()) so every series survives @theme pruning,
      since chart colours are referenced from SVG prop strings. */
-  --color-chart-1: #3d9aa4; /* teal — primary / focal (the right edge of the brand set) */
-  --color-chart-2: #f7d06b; /* golden yellow — the warm 2nd series */
-  --color-chart-3: #52496e; /* muted purple */
-  --color-chart-4: #2d6f8a; /* deep teal-blue */
-  --color-chart-5: #232149; /* navy ink */
-  --color-chart-6: #8c8c84; /* grey — extended series + de-emphasis tone */
+  /* Vibrant teal/cyan family (user-mandated 2026-11-14): the same hues as
+     the original teal-led set, pushed to full saturation so they read at a
+     glance on white (the Span chart look). Still no green or red. */
+  --color-chart-1: #0fa3a0; /* vivid teal — primary / focal */
+  --color-chart-2: #ffc233; /* vivid golden yellow — the warm 2nd series */
+  --color-chart-3: #6b4de6; /* vivid purple */
+  --color-chart-4: #0a76b6; /* vivid cerulean (deep teal-blue) */
+  --color-chart-5: #3036a8; /* vivid indigo navy */
+  --color-chart-6: #8f8f8f; /* neutral grey — extended series + de-emphasis tone */
 }
 
 /*
@@ -849,15 +888,19 @@
     color: var(--foreground);
     font-family: var(--font-sans);
     font-size: var(--text-base); /* 14px base */
-    /* Stylistic sets ss01, ss02, ss03. Figures are tabular everywhere
-       (data-dense UI) via the real property, not a "tnum" feature tag. */
-    font-feature-settings: "ss01", "ss02", "ss03";
+    /* Figures are tabular everywhere (data-dense UI) via the real property,
+       not a "tnum" feature tag. */
     font-variant-numeric: tabular-nums;
     font-synthesis-weight: none;
   }
 
+  /* Heading roles take the heading family; everything else stays in Geist. */
+  :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
+    font-family: var(--font-heading);
+  }
+
   /* Literal code uses the bundled mono face, including unclassed semantic
-     code elements. UI copy and data remain in Aribau Grotesk. */
+     code elements. UI copy and data remain in Geist. */
   code,
   kbd,
   samp,

package/theme.css

@@ -9,16 +9,20 @@
  * ============================================================
  *  ADS 1.0 — Design Tokens
  *  Palette: neutral greys + product teal
- *  Typeface: Aribau Grotesk
+ *  Typefaces: Geist (body and UI), Season Mix (headings)
  * ============================================================
  */
 @theme {
   /* ---- Typography ----
-     One brand typeface (Regular + Medium). Figures stay in Aribau Grotesk with
-     `tabular-nums` (enabled globally in index.css); only literal source code
-     steps to the mono stack. */
-  --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
-    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+     Two families: Geist for body, labels, controls, rows and data values
+     (Regular + Medium), and Season Mix for heading roles — page, drawer,
+     modal, section and chart titles, and every h1–h6 / [role=heading]
+     (index.css applies it). Figures stay in Geist with `tabular-nums`
+     (enabled globally in index.css); only literal source code steps to the
+     mono stack. Season Mix is licensed and not bundled (see fonts.css). */
+  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  --font-heading: "Season Mix", serif;
 
   /* Source code only (CodeBlock, inline Code). JetBrains Mono is bundled so
      code renders consistently across platforms. Never use it for UI copy or
@@ -26,27 +30,42 @@
   --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular,
     "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
 
-  /* ---- Type scale ---- seven canonical steps: XS · S · M · L · XL · 2XL · 3XL.
-     Roles follow the agent workflow. Root stays 16px so spacing is unaffected. */
-  --text-xs: 0.625rem;     /* 10px · noninteractive micro metadata */
-  --text-xs--line-height: 0.875rem; /* 14px */
-  --text-s: 0.75rem;       /* 12px · compact controls, table headers and kickers */
-  --text-s--line-height: 1rem; /* 16px */
-  --text-m: 0.875rem;      /* 14px · body, table cells, form labels and controls */
-  --text-m--line-height: 1.25rem; /* 20px */
-  --text-l: 1rem;          /* 16px · tabs and section titles */
-  --text-l--line-height: 1.375rem; /* 22px */
-  --text-xl: 1.125rem;     /* 18px · metric values and subtitles */
-  --text-xl--line-height: 1.5rem; /* 24px */
-  --text-2xl: 1.5rem;      /* 24px · page titles */
-  --text-2xl--line-height: 2rem; /* 32px */
-  --text-3xl: 2rem;        /* 32px · large data display */
-  --text-3xl--line-height: 2.5rem; /* 40px */
+  /* ---- Type scale ---- the Radix Themes scale (user-mandated, 2026-11-14):
+     nine steps, each with its own line height and optical tracking (larger
+     steps tighten, the smallest opens slightly). ADS names map one step up
+     from the old 14px-body scale so everyday text reads at 16px:
+       XS = 1 · S = 2 · M = 3 · L = 4 · XL = 5 · 2XL = 6 · 3XL = 7 · 4XL = 8 · 5XL = 9
+     Root stays 16px so spacing is unaffected. */
+  --text-xs: 0.75rem;      /* 12px · micro metadata, kickers, axis ticks, pagination */
+  --text-xs--line-height: 1rem; /* 16px */
+  --text-xs--letter-spacing: 0.0025em;
+  --text-s: 0.875rem;      /* 14px · secondary metadata, chips, table headers, compact controls */
+  --text-s--line-height: 1.25rem; /* 20px */
+  --text-s--letter-spacing: 0em;
+  --text-m: 1rem;          /* 16px · body, table cells, form labels, controls and tabs */
+  --text-m--line-height: 1.5rem; /* 24px */
+  --text-m--letter-spacing: 0em;
+  --text-l: 1.125rem;      /* 18px · section and card titles */
+  --text-l--line-height: 1.625rem; /* 26px */
+  --text-l--letter-spacing: -0.0025em;
+  --text-xl: 1.25rem;      /* 20px · page titles and breadcrumbs */
+  --text-xl--line-height: 1.75rem; /* 28px */
+  --text-xl--letter-spacing: -0.005em;
+  --text-2xl: 1.5rem;      /* 24px · onboarding and empty-state headlines */
+  --text-2xl--line-height: 1.875rem; /* 30px */
+  --text-2xl--letter-spacing: -0.00625em;
+  --text-3xl: 1.75rem;     /* 28px · detail-panel and tile metrics */
+  --text-3xl--line-height: 2.25rem; /* 36px */
+  --text-3xl--letter-spacing: -0.0075em;
+  --text-4xl: 2.1875rem;   /* 35px · stat-card numbers */
+  --text-4xl--line-height: 2.5rem; /* 40px */
+  --text-4xl--letter-spacing: -0.01em;
+  --text-5xl: 3.75rem;     /* 60px · display numbers */
+  --text-5xl--line-height: 3.75rem; /* 60px */
+  --text-5xl--letter-spacing: -0.025em;
 
   /* This is the complete ADS scale. Remove Tailwind's larger default steps so
-     Storybook and product code cannot silently introduce an eighth size. */
-  --text-4xl: initial;
-  --text-5xl: initial;
+     Storybook and product code cannot silently introduce a tenth size. */
   --text-6xl: initial;
   --text-7xl: initial;
   --text-8xl: initial;
@@ -212,12 +231,19 @@
   /* Brand mark and artifact canvas wash share the product teal. */
   --color-brand-mark: var(--brand);
 
-  /* ---- Radii ---- four canonical steps: XS · S · M · L.
+  /* ---- Radii ---- four control steps (XS · S · M · L) plus two
+     surface radii (card, window).
      M (6px) is the default corner radius. */
   --radius-xs: 0.125rem;  /*  2px · micro details */
   --radius-s: 0.25rem;    /*  4px · compact controls */
   --radius-m: 0.375rem;   /*  6px · default controls and surfaces */
-  --radius-l: 0.5rem;     /*  8px · menus, cards, and large surfaces */
+  --radius-l: 0.5rem;     /*  8px · menus, popovers and large controls */
+
+  /* Surface radii (user-mandated 2026-11-12, the window panel style):
+     resting cards (stat, chart, connector) and the app window that holds
+     the sidebar and the page. Controls never use these. */
+  --radius-card: 0.875rem;   /* 14px · cards that rest on a white page */
+  --radius-window: 1.125rem; /* 18px · the app window (sidebar + page) */
 
   /* Compatibility aliases preserve existing ADS utilities. */
   --radius-sm: var(--radius-s);
@@ -236,7 +262,9 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- five shadows, nothing else (ADS 1.0.8).
+  /* ---- Elevation ---- eight shadows, nothing else (ADS 1.0.10): flat,
+     two floating levels, two table hints, two resting surfaces and the
+     active sidebar item (below).
      A shadow means "this layer floats above the page". Everything that sits
      in the page — cards, panels, chips, buttons, tabs, fields — is flat and
      reads by fill or border. Neutral WG12 ink (rgb 32 32 32); each floating
@@ -256,6 +284,17 @@
   --shadow-table-smudge-left: 8px 0 24px -14px rgb(32 32 32 / 0.05);
   --shadow-table-smudge-right: -8px 0 24px -14px rgb(32 32 32 / 0.05);
 
+  /* Resting surfaces (user-mandated 2026-11-12). Not "floating": a soft,
+     barely-there lift that, with the WG4 hairline, sets a card or the app
+     window off its ground. Only Card (and stat/chart cards built on it) and
+     the app window carry these; panels, rows, chips and controls stay flat. */
+  --shadow-card: 0 1px 2px rgb(32 32 32 / 0.04), 0 8px 24px -12px rgb(32 32 32 / 0.10);
+  --shadow-window: 0 1px 2px rgb(32 32 32 / 0.05), 0 24px 48px -24px rgb(32 32 32 / 0.18);
+  /* The active sidebar item (user-mandated 2026-11-12): its White fill lifts
+     off the WG2 rail with a small, tight shadow so "you are here" reads at a
+     glance. Sidebar active rows only; hover stays flat. */
+  --shadow-nav-active: 0 1px 2px rgb(32 32 32 / 0.08), 0 4px 12px -4px rgb(32 32 32 / 0.14);
+
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
   --sidebar-width-sm: 3.5rem; /* 56px — collapsed icon rail */
@@ -272,6 +311,8 @@
   --card-padding: 1.25rem; /* 20px — inner padding for cards */
   --connector-card-max: 30rem; /* 480px — max column width for connector-card grids (cap; no min) */
   --connector-card-min: 20rem; /* 320px — min column width for auto-fill connector-card grids (cards stretch to 1fr; column count follows the container) */
+  --modal-height: 40rem; /* 640px — every md/lg/xl Modal is this tall; header + footer stay put and ModalBody scrolls */
+  --modal-height-sm: 20rem; /* 320px — the fixed height of a sm (confirmation) Modal */
 
   /* ---- Chat (Ask Actioneer / assistant-ui) ---- */
   --thread-max-width: 44rem; /* chat column cap — readable prose measure, all panes */
@@ -298,18 +339,21 @@
      "good" and red reads "bad" even when the series is just a named entity,
      so a category key must never imply one. Green/red stay reserved for
      genuinely semantic states (success badges, danger alerts, a delta the
-     CALLER has judged). Blue leads as the focal series; purple, orange, cyan
-     and amber extend; grey closes as the sixth and doubles as the
-     de-emphasis tone.
+     CALLER has judged). Vivid teal leads as the focal series; golden
+     yellow, purple, cerulean and indigo navy extend; grey closes as the sixth
+     and doubles as the de-emphasis tone.
 
      Explicit hexes (not var()) so every series survives @theme pruning,
      since chart colours are referenced from SVG prop strings. */
-  --color-chart-1: #3d9aa4; /* teal — primary / focal (the right edge of the brand set) */
-  --color-chart-2: #f7d06b; /* golden yellow — the warm 2nd series */
-  --color-chart-3: #52496e; /* muted purple */
-  --color-chart-4: #2d6f8a; /* deep teal-blue */
-  --color-chart-5: #232149; /* navy ink */
-  --color-chart-6: #8c8c84; /* grey — extended series + de-emphasis tone */
+  /* Vibrant teal/cyan family (user-mandated 2026-11-14): the same hues as
+     the original teal-led set, pushed to full saturation so they read at a
+     glance on white (the Span chart look). Still no green or red. */
+  --color-chart-1: #0fa3a0; /* vivid teal — primary / focal */
+  --color-chart-2: #ffc233; /* vivid golden yellow — the warm 2nd series */
+  --color-chart-3: #6b4de6; /* vivid purple */
+  --color-chart-4: #0a76b6; /* vivid cerulean (deep teal-blue) */
+  --color-chart-5: #3036a8; /* vivid indigo navy */
+  --color-chart-6: #8f8f8f; /* neutral grey — extended series + de-emphasis tone */
 }
 
 /*