@actioneer/ads 0.7.0 → 1.0.0

package/theme.css

@@ -8,7 +8,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: soft neutral greys + product green
+ *  Palette: warm greys + product green
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -26,22 +26,33 @@
   --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular,
     "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
 
-  /* ---- Type scale ---- five canonical steps: S · M · L · XL · 2XL.
-     Root stays 16px so spacing is unaffected. */
-  --text-s: 0.8125rem;     /* 13px · captions, secondary text, table cells */
-  --text-s--line-height: 1.125rem; /* 18px */
-  --text-m: 0.9375rem;     /* 15px · default body */
-  --text-m--line-height: 1.375rem; /* 22px */
-  --text-l: 1.1875rem;     /* 19px · emphasized body, section headings */
-  --text-l--line-height: 1.625rem; /* 26px */
-  --text-xl: 1.5625rem;    /* 25px · page titles */
-  --text-xl--line-height: 2rem; /* 32px */
-  --text-2xl: 1.9375rem;   /* 31px · display */
-  --text-2xl--line-height: 2.375rem; /* 38px */
-
-  /* Compatibility aliases keep existing ADS consumers on the new scale. */
-  --text-xs: var(--text-s);
-  --text-xs--line-height: var(--text-s--line-height);
+  /* ---- 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 · compact chips and micro metadata */
+  --text-xs--line-height: 0.875rem; /* 14px */
+  --text-s: 0.75rem;       /* 12px · table headers and uppercase kickers */
+  --text-s--line-height: 1rem; /* 16px */
+  --text-m: 0.875rem;      /* 14px · default body, table cells, record names */
+  --text-m--line-height: 1.25rem; /* 20px */
+  --text-l: 1rem;          /* 16px · tabs, form labels, 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 */
+
+  /* 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;
+  --text-6xl: initial;
+  --text-7xl: initial;
+  --text-8xl: initial;
+  --text-9xl: initial;
+
+  /* Compatibility aliases keep existing ADS consumers on the canonical scale. */
   --text-sm: var(--text-s);
   --text-sm--line-height: var(--text-s--line-height);
   --text-base: var(--text-m);
@@ -51,10 +62,10 @@
 
   /* ---- Foundation palette ----
      Canonical primitive names:
-     G1…G12 = Green · NG1…NG12 = Neutral Grey.
+     G1…G12 = Green · WG1…WG12 = Warm Grey.
      Each ramp progresses from light backgrounds and interactive fills through
      supporting tones to solid colors and accessible text. Neutral UI borders
-     are intentionally restricted to NG3–NG5. ---- */
+     are intentionally restricted to WG3–WG5. ---- */
   --color-g1: #f7f9f7;
   --color-g2: #eef5f0;
   --color-g3: #e2efe5;
@@ -68,33 +79,33 @@
   --color-g11: #1f623b;
   --color-g12: #183c28;
 
-  --color-ng1: #fafafa;
-  --color-ng2: #f6f6f6;
-  --color-ng3: #f1f1f1;
-  --color-ng4: #ececec;
-  --color-ng5: #e6e6e6;
-  --color-ng6: #dedede;
-  --color-ng7: #d4d4d4;
-  --color-ng8: #bdbdbd;
-  --color-ng9: #868686;
-  --color-ng10: #7c7b7b;
-  --color-ng11: #5e5d5d;
-  --color-ng12: #202020;
-
-  /* Deprecated Warm Grey names now resolve to Neutral Grey. Keep these
-     aliases so existing consumer utilities continue to render safely. */
-  --color-wg1: var(--color-ng1);
-  --color-wg2: var(--color-ng2);
-  --color-wg3: var(--color-ng3);
-  --color-wg4: var(--color-ng4);
-  --color-wg5: var(--color-ng5);
-  --color-wg6: var(--color-ng6);
-  --color-wg7: var(--color-ng7);
-  --color-wg8: var(--color-ng8);
-  --color-wg9: var(--color-ng9);
-  --color-wg10: var(--color-ng10);
-  --color-wg11: var(--color-ng11);
-  --color-wg12: var(--color-ng12);
+  --color-wg1: #f5f5f3;
+  --color-wg2: #f1f1ef;
+  --color-wg3: #ececea;
+  --color-wg4: #e5e5e2;
+  --color-wg5: #dcdcd8;
+  --color-wg6: #d1d1cc;
+  --color-wg7: #c2c2bc;
+  --color-wg8: #a6a69f;
+  --color-wg9: #777771;
+  --color-wg10: #686863;
+  --color-wg11: #4b4b47;
+  --color-wg12: #20201e;
+
+  /* Deprecated Neutral Grey names resolve to the canonical Warm Grey ramp.
+     Keep these aliases so existing consumer utilities continue to render. */
+  --color-ng1: var(--color-wg1);
+  --color-ng2: var(--color-wg2);
+  --color-ng3: var(--color-wg3);
+  --color-ng4: var(--color-wg4);
+  --color-ng5: var(--color-wg5);
+  --color-ng6: var(--color-wg6);
+  --color-ng7: var(--color-wg7);
+  --color-ng8: var(--color-wg8);
+  --color-ng9: var(--color-wg9);
+  --color-ng10: var(--color-wg10);
+  --color-ng11: var(--color-wg11);
+  --color-ng12: var(--color-wg12);
 
   --color-white: #ffffff;
 
@@ -112,31 +123,31 @@
   --color-green-900: var(--color-g11);
   --color-green-950: var(--color-g12);
 
-  --color-grey-50: var(--color-ng1);
-  --color-grey-100: var(--color-ng2);
-  --color-grey-200: var(--color-ng3);
-  --color-grey-300: var(--color-ng4);
-  --color-grey-400: var(--color-ng5);
-  --color-grey-500: var(--color-ng6);
-  --color-grey-600: var(--color-ng7);
-  --color-grey-700: var(--color-ng8);
-  --color-grey-800: var(--color-ng9);
-  --color-grey-850: var(--color-ng10);
-  --color-grey-900: var(--color-ng11);
-  --color-grey-950: var(--color-ng12);
-
-  --color-ink-50: var(--color-ng1);
-  --color-ink-100: var(--color-ng2);
-  --color-ink-200: var(--color-ng3);
-  --color-ink-300: var(--color-ng4);
-  --color-ink-400: var(--color-ng5);
-  --color-ink-500: var(--color-ng6);
-  --color-ink-600: var(--color-ng7);
-  --color-ink-700: var(--color-ng8);
-  --color-ink-800: var(--color-ng9);
-  --color-ink-850: var(--color-ng10);
-  --color-ink-900: var(--color-ng11);
-  --color-ink-950: var(--color-ng12);
+  --color-grey-50: var(--color-wg1);
+  --color-grey-100: var(--color-wg2);
+  --color-grey-200: var(--color-wg3);
+  --color-grey-300: var(--color-wg4);
+  --color-grey-400: var(--color-wg5);
+  --color-grey-500: var(--color-wg6);
+  --color-grey-600: var(--color-wg7);
+  --color-grey-700: var(--color-wg8);
+  --color-grey-800: var(--color-wg9);
+  --color-grey-850: var(--color-wg10);
+  --color-grey-900: var(--color-wg11);
+  --color-grey-950: var(--color-wg12);
+
+  --color-ink-50: var(--color-wg1);
+  --color-ink-100: var(--color-wg2);
+  --color-ink-200: var(--color-wg3);
+  --color-ink-300: var(--color-wg4);
+  --color-ink-400: var(--color-wg5);
+  --color-ink-500: var(--color-wg6);
+  --color-ink-600: var(--color-wg7);
+  --color-ink-700: var(--color-wg8);
+  --color-ink-800: var(--color-wg9);
+  --color-ink-850: var(--color-wg10);
+  --color-ink-900: var(--color-wg11);
+  --color-ink-950: var(--color-wg12);
 
   /* ---- Semantic accent ramps ---- */
   /* Success uses the lichen lime family and stays status-only. The original
@@ -187,21 +198,21 @@
   /* Demo logo indigo — source for artifact canvas wash. */
   --color-brand-mark: #2e1065;
 
-  /* ---- Radii ---- five canonical steps: XS · S · M · L · XL.
+  /* ---- Radii ---- four canonical steps: XS · S · M · L.
      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 and cards */
-  --radius-xl: 0.75rem;   /* 12px · large panels and feature surfaces */
+  --radius-l: 0.5rem;     /*  8px · menus, cards, and large surfaces */
 
   /* Compatibility aliases preserve existing ADS utilities. */
   --radius-sm: var(--radius-s);
   --radius-md: var(--radius-m);
   --radius-lg: var(--radius-l);
-  --radius-2xl: var(--radius-xl);
-  --radius-3xl: var(--radius-xl);
-  --radius-4xl: var(--radius-xl);
+  --radius-xl: var(--radius-l);
+  --radius-2xl: var(--radius-l);
+  --radius-3xl: var(--radius-l);
+  --radius-4xl: var(--radius-l);
   /* Shape-only exception for avatars, icon buttons, progress tracks, chips,
      and badges. It is not part of the corner-radius scale. */
   --radius-full: 9999px;
@@ -211,7 +222,7 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- Shopify-inspired 0–600 ladder, recolored with NG12.
+  /* ---- Elevation ---- Shopify-inspired 0–600 ladder, recolored with WG12.
      Geometry and opacity increase together; static surfaces remain at 0. */
   --shadow-0: none;
   --shadow-100: 0 1px 0 0 rgb(32 32 32 / 0.07);
@@ -227,7 +238,7 @@
 
   /* Pinned-table-column smudges — whisper-soft directional casts shown only
      while content is hidden behind a sticky column (Table is scroll-aware).
-     Deep negative spread keeps the edge feathered; the tint is neutral grey. */
+     Deep negative spread keeps the edge feathered; the tint is warm grey. */
   --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);
 
@@ -253,8 +264,8 @@
   --sidebar-item: 2rem; /* 32px — collapsed rail hit target (square) */
   --sidebar-logo: 1.25rem; /* 20px — brand mark, centered in a --sidebar-item square */
   --sidebar-text-indent: 2.375rem; /* px-3 + icon size-4 + gap-2.5 — history rows align to nav-item text */
-  --sidebar-navigation-text-size: var(--text-m); /* 15px — sidebar actions, items, history, and account text */
-  --sidebar-section-label-size: 0.8125rem; /* 13px — section and history labels */
+  --sidebar-navigation-text-size: var(--text-m); /* 14px — sidebar actions, items, history, and account text */
+  --sidebar-section-label-size: var(--text-s); /* 12px — section and history labels */
   --panel-header-height: 2.75rem; /* 44px — Panel / toolbar header */
   --aside-width: 20rem; /* 320px — right-hand panel column */
 
@@ -267,7 +278,7 @@
   --thread-max-width: 44rem; /* chat column cap — readable prose measure, all panes */
   --thread-max-width-wide: 64rem; /* rich-content breakout cap (tables/charts/tool cards) on wide panes; prose keeps --thread-max-width */
   --composer-bg: var(--elevated); /* pure white composer surface */
-  --composer-radius: var(--radius-xl);
+  --composer-radius: var(--radius-l);
   --composer-padding: 0.5rem;
   --composer-placeholder-max-h: calc(var(--text-m--line-height) * 2); /* rotating placeholder clamp — two lines of the input's own rhythm, so it can never overlap the accessory row */
   --chat-texture-opacity: 0.06; /* welcome-state halftone wash */
@@ -307,6 +318,7 @@
  * @theme inline exposes them as utilities (bg-background, text-primary, …).
  */
 @theme inline {
+  /* The shell canvas and its ink: the ground between top-level panels. */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
 
@@ -323,13 +335,16 @@
   --color-secondary: var(--text-secondary);
   --color-tertiary: var(--text-tertiary);
 
+  /* One continuous recess inside a white surface, never a screen-level ground. */
   --color-surface: var(--surface);
   --color-surface-foreground: var(--surface-foreground);
   --color-elevated: var(--elevated);
 
+  /* The hover and row-state wash: interaction, not a default item background. */
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
 
+  /* The white working plane that sits on the canvas, and the specimen hairline. */
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-specimen-stroke: var(--specimen-stroke);
@@ -351,12 +366,15 @@
   /* Quiet fill — avatars, chips, and disabled controls */
   --color-fill: var(--fill);
   --color-fill-foreground: var(--fill-foreground);
+  /* Table surfaces: the white tray, its hairlines, and header ink. */
   --color-table-shell: var(--table-shell);
   --color-table-stroke: var(--table-stroke);
   --color-table-header-foreground: var(--table-header-foreground);
 
+  /* The artifact sheet: white warmed by a trace of the brand mark. */
   --color-artifact-canvas: var(--artifact-canvas);
 
+  /* The active and selected wash, one step above hover. */
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
 
@@ -368,12 +386,14 @@
   /* Amber-500 fill kept (it IS the caution signal); dark ink foreground
      instead of white = 6.94:1 (white on amber was 2.35:1, failed even 3:1). */
   --color-warning: var(--color-warning-500);
-  --color-warning-foreground: var(--color-ng12);
+  --color-warning-foreground: var(--color-wg12);
+  /* Danger and info: solid semantic fills carrying white foregrounds. */
   --color-danger: var(--color-danger-600);
   --color-danger-foreground: var(--color-white);
   --color-info: var(--color-info-600);
   --color-info-foreground: var(--color-white);
 
+  /* The neutral stroke ladder: every 1px UI border stays within WG3 to WG5. */
   --color-border-primary: var(--border-primary);
   --color-border-secondary: var(--border-secondary);
   --color-border-tertiary: var(--border-tertiary);
@@ -383,6 +403,7 @@
   --color-menu-stroke: var(--menu-stroke);
   --color-toast-stroke: var(--toast-stroke);
   --color-tree-stroke: var(--tree-stroke);
+  /* Focus ring and scrim, both translucent warm ink. */
   --color-ring: var(--ring);
   --color-overlay: var(--overlay);
 
@@ -413,36 +434,37 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  /* Surfaces and achromatic text/actions point into NG; the primary CTA
+  /* Surfaces and achromatic text/actions point into WG; the primary CTA
      points into G. */
-  --background: var(--color-ng2);          /* step 2  · canvas */
-  --foreground: var(--color-ng12);         /* step 12 */
-
-  /* Both surface contexts point directly into the approved NG text steps.
-     NG10 is the tertiary/de-emphasis step; it does not clear 4.5:1 for normal
-     body text on these surfaces, so reserve it for nonessential content. */
-  --text-on-white-primary: var(--color-ng12);       /* 16.29:1 · AAA */
-  --text-on-white-secondary: var(--color-ng11);     /*  6.56:1 · AA  */
-  --text-on-white-tertiary: var(--color-ng10);      /*  4.22:1 */
-  --text-on-warm-grey-primary: var(--color-ng12);   /* legacy name · neutral canvas */
-  --text-on-warm-grey-secondary: var(--color-ng11); /* legacy name · neutral canvas */
-  --text-on-warm-grey-tertiary: var(--color-ng10);  /* legacy name · neutral canvas */
-
-  /* Existing context-free utilities remain compatibility aliases. Their
-     tertiary value stays conservative across NG2–NG4 and White. */
-  --text-primary: var(--color-ng12);       /* ~12.5:1 AAA (min surf) */
-  --text-secondary: var(--color-ng11);     /* ~5.0:1  AA  (min surf) */
-  --text-tertiary: #625f5c;                /* ~4.53:1 AA  (min surf) */
-
-  --surface: var(--color-ng3);             /* step 3  · tinted canvas */
-  --surface-foreground: var(--color-ng12);
+  --background: var(--color-wg2);          /* step 2  · canvas */
+  --foreground: var(--color-wg12);         /* step 12 */
+
+  /* Both surface contexts point directly into the approved WG text steps.
+     WG9 is the tertiary/de-emphasis step for nonessential metadata. It clears
+     normal-text AA on White; use Secondary when normal text on WG2 must clear
+     AA. */
+  --text-on-white-primary: var(--color-wg12);       /* 16.32:1 · AAA */
+  --text-on-white-secondary: var(--color-wg11);     /*  8.76:1 · AAA */
+  --text-on-white-tertiary: var(--color-wg9);       /*  4.50:1 · AA  */
+  --text-on-warm-grey-primary: var(--color-wg12);   /* 14.43:1 on WG2 · AAA */
+  --text-on-warm-grey-secondary: var(--color-wg11); /*  7.75:1 on WG2 · AAA */
+  --text-on-warm-grey-tertiary: var(--color-wg9);   /*  3.98:1 on WG2 · large text AA */
+
+  /* Existing context-free utilities remain conservative compatibility aliases
+     across WG2–WG4 and White until their call sites adopt a surface role. */
+  --text-primary: var(--color-wg12);       /* 12.93:1 AAA (WG4 min surf) */
+  --text-secondary: var(--color-wg11);     /*  6.94:1 AA  (WG4 min surf) */
+  --text-tertiary: color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11)); /* 4.86:1 AA (WG4) */
+
+  --surface: var(--color-wg3);             /* step 3  · tinted canvas */
+  --surface-foreground: var(--color-wg12);
   --elevated: var(--color-white);           /* pure white base */
 
-  --muted: var(--color-ng4);               /* step 4 */
-  --muted-foreground: var(--color-ng11);   /* step 11 · readable UI text */
+  --muted: var(--color-wg4);               /* step 4 */
+  --muted-foreground: var(--color-wg11);   /* step 11 · readable UI text */
 
   --card: var(--color-white);               /* pure white base */
-  --card-foreground: var(--color-ng12);
+  --card-foreground: var(--color-wg12);
 
   /* Studio green is deliberately isolated to the primary CTA role (roughly
      5–10% of a screen). Selection controls keep using neutral `brand` below,
@@ -455,36 +477,36 @@
 
   /* Neutral action role. The `brand` name remains as a compatibility API,
      and shared selection/control states intentionally remain achromatic. */
-  --brand: var(--color-ng12);              /* darkest neutral action */
+  --brand: var(--color-wg12);              /* darkest neutral action */
   --brand-foreground: var(--color-white);
-  --brand-hover: var(--color-ng11);        /* lighter hover lift */
-  --brand-text: var(--color-ng12);         /* action text / links */
+  --brand-hover: var(--color-wg11);        /* lighter hover lift */
+  --brand-text: var(--color-wg12);         /* action text / links */
 
-  /* Interactive rows lift one step above the NG1 zebra band. */
-  --table-row-hover: var(--color-ng2);
-  --table-row-selected: var(--color-ng1);
+  /* Interactive row hover/focus uses the WG3 highlight wash. */
+  --table-row-hover: var(--color-wg3);
+  --table-row-selected: var(--color-wg1);
 
-  /* Quiet component fill. NG3 is the first interactive-background
+  /* Quiet component fill. WG3 is the first interactive-background
      step, so this remains visible on both white cards and the step-2 canvas. */
-  --fill: var(--color-ng3);                /* step 3 · default component fill */
-  --fill-foreground: var(--color-ng12);
+  --fill: var(--color-wg3);                /* step 3 · default component fill */
+  --fill-foreground: var(--color-wg12);
 
-  --accent: var(--color-ng5);              /* step 5 · active / selected wash */
-  --accent-foreground: var(--color-ng12);
+  --accent: var(--color-wg5);              /* step 5 · active / selected wash */
+  --accent-foreground: var(--color-wg12);
 
-  /* Every neutral border stays within the consecutive NG3–NG5 range:
+  /* Every neutral border stays within the consecutive WG3–WG5 range:
      tertiary is the quietest 1px divider, secondary is the default hairline,
      and primary is the strongest neutral edge. */
-  --border-primary: var(--color-ng5);       /* step 5 · strongest */
-  --border-secondary: var(--color-ng4);     /* step 4 · default   */
-  --border-tertiary: var(--color-ng3);      /* step 3 · faintest  */
+  --border-primary: var(--color-wg5);       /* step 5 · strongest */
+  --border-secondary: var(--color-wg4);     /* step 4 · default   */
+  --border-tertiary: var(--color-wg3);      /* step 3 · faintest  */
   /* Legacy aliases point into the scale so existing utilities keep resolving. */
   --border: var(--border-secondary);        /* default hairline / separator */
   --border-strong: var(--border-primary);   /* emphasized / hover / selected */
-  --input: var(--color-ng4);                /* form-control edge */
-  --menu-stroke: var(--color-ng4);          /* dropdown edge + separator */
-  --toast-stroke: var(--color-ng4);         /* toast card edge */
-  --tree-stroke: var(--color-ng4);          /* tree connector rail + elbows */
+  --input: var(--color-wg4);                /* form-control edge */
+  --menu-stroke: var(--color-wg4);          /* dropdown edge + separator */
+  --toast-stroke: var(--color-wg4);         /* toast card edge */
+  --tree-stroke: var(--color-wg4);          /* tree connector rail + elbows */
   --field-focus: var(--color-g8);           /* subtle green focused-control edge */
 
   /* Ripple — the appearance wash that radiates from a floating surface's
@@ -495,27 +517,27 @@
 
   /* Stroke width — every standard UI border is exactly 1px. */
   --stroke-width: 1px;
-  --ring: color-mix(in srgb, var(--color-ng12) 50%, transparent);    /* NG12 @ 50% */
-  --overlay: color-mix(in srgb, var(--color-ng12) 50%, transparent); /* NG12 @ 50% */
+  --ring: color-mix(in srgb, var(--color-wg12) 50%, transparent);    /* WG12 @ 50% */
+  --overlay: color-mix(in srgb, var(--color-wg12) 50%, transparent); /* WG12 @ 50% */
 
   /* Functional / domain tokens — named for their render role, pointing into
-     the canonical NG palette. Components pass these into non-CSS renderers
+     the canonical WG palette. Components pass these into non-CSS renderers
      (Recharts, React Flow, the Paper/WebGL texture) so no component carries a
      raw primitive value. Same DS pattern as the data-viz palette. */
   --chart-axis: var(--border-tertiary);  /* axis lines + de-emphasised marks */
-  --chart-grid: var(--color-ng3);        /* quieter than axes, visible on white */
-  --chart-track: var(--color-ng3);       /* funnel / progress track */
-  --chart-context: var(--color-ng6);     /* de-emphasised context series */
+  --chart-grid: var(--color-wg3);        /* quieter than axes, visible on white */
+  --chart-track: var(--color-wg3);       /* funnel / progress track */
+  --chart-context: var(--color-wg6);     /* de-emphasised context series */
   --chart-active-bar-opacity: 0.68;       /* hover lightens a bar while preserving its series hue */
   --canvas-edge: var(--border-secondary);/* infinite-canvas edges / connectors */
-  --texture-ink: var(--color-ng12);      /* brand-texture / pixel-blast marks */
+  --texture-ink: var(--color-wg12);      /* brand-texture / pixel-blast marks */
   --table-shell: var(--color-white);     /* simplified single-surface table */
-  --table-stroke: var(--color-ng3);      /* table outline + row separators */
-  --table-header-foreground: var(--color-ng10); /* secondary table heading text */
-  --specimen-stroke: var(--color-ng3);   /* showcase preview + variant-group frames */
-  --table-scroll-hint: rgb(32 32 32 / 0.04); /* right-edge "more columns" wash */
-  --surface-inverse: var(--color-ng12);     /* dark hero / inverse surface base */
-  --surface-inverse-soft: var(--color-ng11);/* dark hero gradient falloff */
+  --table-stroke: var(--color-wg3);      /* table outline + row separators */
+  --table-header-foreground: var(--text-tertiary); /* 12px tertiary table heading text */
+  --specimen-stroke: var(--color-wg3);   /* showcase preview + variant-group frames */
+  --table-scroll-hint: color-mix(in srgb, var(--color-wg12) 4%, transparent); /* right-edge wash */
+  --surface-inverse: var(--color-wg12);     /* dark hero / inverse surface base */
+  --surface-inverse-soft: var(--color-wg11);/* dark hero gradient falloff */
   --artifact-canvas: color-mix(in srgb, var(--color-brand-mark) 7%, var(--color-white));
 
   /* shadcn-compat raw surfaces — so a downstream shadcn Sidebar / Popover