@actioneer/ads 0.5.8 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [
@@ -36,6 +36,8 @@
   "dependencies": {
     "@assistant-ui/react": "^0.14.26",
     "@assistant-ui/react-markdown": "^0.14.5",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@internationalized/date": "^3.12.3",
     "@paper-design/shaders": "^0.0.77",
     "@paper-design/shaders-react": "^0.0.77",
     "@phosphor-icons/react": "^2.1.10",
@@ -45,6 +47,7 @@
     "motion": "^12.42.2",
     "ogl": "^1.0.11",
     "radix-ui": "^1.6.2",
+    "react-aria-components": "^1.20.0",
     "recharts": "^2.15.4",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.6.0",

package/styles.css

@@ -5,6 +5,8 @@
 @import "tw-animate-css";
 
 /* ---- Aribau Grotesk ---- */
+@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)
@@ -37,7 +39,8 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: Ink neutrals · Typeface: Aribau Grotesk
+ *  Palette: Warm stone Studio neutrals + restrained green CTA
+ *  Typeface: Aribau Grotesk
  * ============================================================
  */
 @theme {
@@ -48,11 +51,11 @@
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
-  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
-     this resolves to the reader's platform mono, which is what a developer
-     already reads code in. Never use it for UI copy or data. */
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+  /* Source code only (CodeBlock, inline Code). JetBrains Mono is bundled so
+     code renders consistently across platforms. Never use it for UI copy or
+     ordinary data. */
+  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular,
+    "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
 
   /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
      spacing grid is unaffected; only text sizes are anchored to 15px. */
@@ -76,27 +79,28 @@
   --text-2xl: 1.625rem;    /* 26px — display */
   --text-2xl--line-height: 2rem;
 
-  /* ---- Neutral ramp — a role-based neutral Gray 12-step light scale. Every
-     channel is equal, so the product stays neutral with no Sand/Sage cast.
-     The light surface steps retain subtle spacing; the solid/text end is
-     perceptually widened so adjacent swatches and UI roles stay distinct.
+  /* ---- Warm ink ramp — a role-based 12-step light scale sampled from the
+     Actioneer product UI. A restrained red/yellow bias gives canvases and
+     fills an ivory/stone character instead of equal-channel grey. The light
+     surface steps retain subtle spacing; the solid/text end is perceptually
+     widened so adjacent swatches and UI roles stay distinct.
      Each step owns a role — 50/100 =
      backgrounds, 200/300/400 = interactive component fills, 500/600/700 =
      borders & separators, 800/850 = solid, 900/950 = accessible text. The
      `ink` name is retained as the stable ADS API. ---- */
-  --color-ink-50: #fcfcfc;  /*  1 · background      */
-  --color-ink-100: #f9f9f9; /*  2 · background      */
-  --color-ink-150: #f5f5f5; /*      canvas          */
-  --color-ink-200: #f0f0f0; /*  3 · interactive     */
-  --color-ink-300: #e8e8e8; /*  4 · interactive     */
-  --color-ink-400: #e0e0e0; /*  5 · interactive     */
-  --color-ink-500: #d9d9d9; /*  6 · border          */
-  --color-ink-600: #cecece; /*  7 · border          */
-  --color-ink-700: #bbbbbb; /*  8 · border          */
-  --color-ink-800: #8d8d8d; /*  9 · solid           */
-  --color-ink-850: #737373; /* 10 · solid           */
-  --color-ink-900: #555555; /* 11 · accessible text */
-  --color-ink-950: #202020; /* 12 · accessible text */
+  --color-ink-50: #fdfcf8;  /*  1 · background      */
+  --color-ink-100: #f9f8f3; /*  2 · background      */
+  --color-ink-150: #f6f6f1; /*      canvas          */
+  --color-ink-200: #f0efeb; /*  3 · interactive     */
+  --color-ink-300: #e8e7e2; /*  4 · interactive     */
+  --color-ink-400: #deded9; /*  5 · interactive     */
+  --color-ink-500: #d5d4cf; /*  6 · border          */
+  --color-ink-600: #c9c8c2; /*  7 · border          */
+  --color-ink-700: #b7b6b0; /*  8 · border          */
+  --color-ink-800: #8d8c86; /*  9 · solid           */
+  --color-ink-850: #70706a; /* 10 · solid           */
+  --color-ink-900: #444440; /* 11 · accessible text */
+  --color-ink-950: #171714; /* 12 · accessible text */
 
   /* ---- Semantic accent ramps ---- */
   /* Success stays a semantic state color, never a product-primary hue. */
@@ -140,18 +144,18 @@
   /* Demo logo indigo — source for artifact canvas wash. */
   --color-brand-mark: #2e1065;
 
-  /* ---- Radii ---- FOUR values, assigned by element scale and role.
-     2px = micro details; 4px = compact controls; 8px = standard controls
-     and floating UI; 16px = cards and large surfaces. The repeated aliases
-     keep the familiar Tailwind role names while capping surfaces at 16px. */
+  /* ---- Radii ---- FOUR restrained values, assigned by element scale.
+     2px = micro details; 4px = compact controls; 6px = standard controls;
+     8px = menus, cards, panels, and large surfaces. Repeated aliases keep the
+     familiar Tailwind role names while capping every surface at 8px. */
   --radius-xs: 0.125rem;  /*  2px · micro details */
   --radius-sm: 0.25rem;   /*  4px · compact controls */
-  --radius-md: 0.5rem;    /*  8px · standard controls */
+  --radius-md: 0.375rem;  /*  6px · standard controls */
   --radius-lg: 0.5rem;    /*  8px · menus and panels */
-  --radius-xl: 1rem;      /* 16px · cards and surfaces */
-  --radius-2xl: 1rem;     /* 16px · large surfaces */
-  --radius-3xl: 1rem;     /* 16px · capped compatibility alias */
-  --radius-4xl: 1rem;     /* 16px · capped compatibility alias */
+  --radius-xl: 0.5rem;    /*  8px · cards and surfaces */
+  --radius-2xl: 0.5rem;   /*  8px · large surfaces */
+  --radius-3xl: 0.5rem;   /*  8px · capped compatibility alias */
+  --radius-4xl: 0.5rem;   /*  8px · capped compatibility alias */
   /* Shape-only exception for avatars, icon buttons, progress tracks, chips,
      and badges. It is not part of the corner-radius scale. */
   --radius-full: 9999px;
@@ -161,19 +165,18 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- ONE soft token (Claude-panel style).
-     Delineate surfaces with fill color first; add this to gently lift them.
-     The ambient drop sits close (y4, blur16) at low opacity and uses neutral
-     ink — never a cool slate tint that would reintroduce a color cast. */
-  --shadow-elevation: 0 0 0 1px rgb(32 32 32 / 0.03),
-    0 1px 2px 0 rgb(32 32 32 / 0.04),
-    0 4px 16px -6px rgb(32 32 32 / 0.06);
+  /* ---- Elevation ---- ONE restrained Studio token.
+     Delineate surfaces with fill color first; add this only to lift something
+     actionable. A close contact shadow anchors the surface while the large
+     negative spread keeps the ambient shadow soft, quiet, and borderless. */
+  --shadow-elevation: 0 1px 2px rgb(23 23 20 / 0.05),
+    0 8px 20px -16px rgb(23 23 20 / 0.16);
 
   /* 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 ink. */
-  --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);
+     Deep negative spread keeps the edge feathered; the tint is warm ink. */
+  --shadow-table-smudge-left: 8px 0 24px -14px rgb(23 23 20 / 0.05);
+  --shadow-table-smudge-right: -8px 0 24px -14px rgb(23 23 20 / 0.05);
 
   /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
      (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
@@ -187,7 +190,7 @@
     inset 0 8px 16px -8px rgb(255 255 255 / 0.45);
   /* Text fields — a whisper of inset depth so the writing surface reads
      recessed into the page (persists through hover/focus/invalid). */
-  --inner-glow-field: inset 0 1px 2px 0 rgb(32 32 32 / 0.06);
+  --inner-glow-field: inset 0 1px 2px 0 rgb(23 23 20 / 0.06);
 
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
@@ -267,6 +270,11 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
+  /* Primary CTA role — restrained Studio green, used sparingly. */
+  --color-action-primary: var(--action-primary);
+  --color-action-primary-foreground: var(--action-primary-foreground);
+  --color-action-primary-hover: var(--action-primary-hover);
+
   /* Compatibility action role — neutral ink, never a colored primary hue. */
   --color-brand: var(--brand);
   --color-brand-foreground: var(--brand-foreground);
@@ -331,7 +339,7 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  /* Every neutral semantic token below points INTO the ink primitive scale.
+  /* Every warm-neutral semantic token below points INTO the ink primitive scale.
      Only pure white (#ffffff) stays literal: it is a base surface, not a
      neutral scale step. */
   --background: var(--color-ink-100);      /* step 2  · canvas */
@@ -339,12 +347,12 @@
 
   /* Text levels: primary ink-950, secondary ink-900, tertiary a tuned grey.
      All three clear AA (4.5:1) for body copy on every surface they land on.
-     Tertiary is NOT an ink step: ink-800 (#8d8d8d) was AA-large only (2.7:1
-     on muted) but is used at 13px in 200+ places, so it is pinned to the
+     Tertiary is NOT an ink step: ink-850 (#70706a) falls below AA on muted
+     but is used at 13px in 200+ places, so it is pinned to the
      lightest grey that still passes 4.5:1 on bg/card/surface/muted. */
-  --text-primary: var(--color-ink-950);    /* ~16:1  AAA           */
-  --text-secondary: var(--color-ink-900);  /* ~7.1:1 AAA           */
-  --text-tertiary: #686868;                /* ~4.55:1 AA (min surf) */
+  --text-primary: var(--color-ink-950);    /* ~14.5:1 AAA (min surf) */
+  --text-secondary: var(--color-ink-900);  /* ~7.9:1  AAA (min surf) */
+  --text-tertiary: #686863;                /* ~4.52:1 AA  (min surf) */
 
   --surface: var(--color-ink-200);         /* step 3  · tinted canvas */
   --surface-foreground: var(--color-ink-950);
@@ -356,8 +364,15 @@
   --card: #ffffff;                         /* pure white base */
   --card-foreground: var(--color-ink-950);
 
+  /* Studio green is deliberately isolated to the primary CTA role (roughly
+     5–10% of a screen). Selection controls keep using neutral `brand` below,
+     so tabs, switches, radios, and progress never inherit CTA color. */
+  --action-primary: #2f7d5a;
+  --action-primary-foreground: #ffffff;
+  --action-primary-hover: #256749;
+
   /* Neutral action role. The `brand` name remains as a compatibility API,
-     but the product has no colored primary palette. */
+     and shared selection/control states intentionally remain achromatic. */
   --brand: var(--color-ink-950);           /* darkest action ink */
   --brand-foreground: #ffffff;
   --brand-hover: var(--color-ink-900);     /* lighter hover lift */
@@ -369,7 +384,7 @@
   --table-row-hover: color-mix(in srgb, var(--card) 40%, var(--muted));
   --table-row-selected: color-mix(in srgb, var(--card) 10%, var(--muted));
 
-  /* Quiet component fill. Radix step 3 is the first interactive-background
+  /* Quiet component fill. Ink step 3 is the first interactive-background
      step, so this remains visible on both white cards and the step-2 canvas. */
   --fill: var(--color-ink-200);            /* step 3 · default component fill */
   --fill-foreground: var(--color-ink-950);
@@ -377,12 +392,12 @@
   --accent: var(--color-ink-400);          /* step 5 · active / selected wash */
   --accent-foreground: var(--color-ink-950);
 
-  /* Borders use consecutive Radix steps 5–7. This avoids the old 3→5→7 jump:
-     tertiary stays quiet but visible at 0.5px, secondary is the Radix subtle
+  /* Borders use consecutive ink steps 5–7. This avoids the old 3→5→7 jump:
+     tertiary stays quiet but visible at 0.5px, secondary is the subtle
      border step, and primary is the default interactive-control edge. */
-  --border-primary: var(--color-ink-600);   /* step 7 · #cecece · strongest */
-  --border-secondary: var(--color-ink-500); /* step 6 · #d9d9d9 · default   */
-  --border-tertiary: var(--color-ink-400);  /* step 5 · #e0e0e0 · faintest  */
+  --border-primary: var(--color-ink-600);   /* step 7 · #c9c8c2 · strongest */
+  --border-secondary: var(--color-ink-500); /* step 6 · #d5d4cf · default   */
+  --border-tertiary: var(--color-ink-400);  /* step 5 · #deded9 · 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 */
@@ -413,7 +428,7 @@
   --canvas-edge: var(--border-secondary);/* infinite-canvas edges / connectors */
   --texture-ink: var(--color-ink-950);   /* brand-texture / pixel-blast marks */
   --table-shell: var(--color-ink-200);   /* recessed table tray (lighter than muted) */
-  --table-scroll-hint: rgb(32 32 32 / 0.04); /* right-edge "more columns" wash */
+  --table-scroll-hint: rgb(23 23 20 / 0.04); /* right-edge "more columns" wash */
   --surface-inverse: var(--color-ink-950);      /* dark hero / inverse surface base */
   --surface-inverse-soft: var(--color-ink-900); /* dark hero gradient falloff */
   --artifact-canvas: color-mix(in srgb, var(--color-brand-mark) 7%, #ffffff);
@@ -698,13 +713,14 @@
     font-synthesis-weight: none;
   }
 
-  /* One typeface only: neutralize the browser's default monospace on
-     code/kbd/samp/pre so they render in Aribau Grotesk like everything else. */
+  /* Literal code uses the bundled mono face, including unclassed semantic
+     code elements. UI copy and data remain in Aribau Grotesk. */
   code,
   kbd,
   samp,
   pre {
-    font-family: inherit;
+    font-family: var(--font-mono);
+    font-feature-settings: normal;
   }
 
   /* Consistent focus ring across the system */

package/theme.css

@@ -8,7 +8,8 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: Ink neutrals · Typeface: Aribau Grotesk
+ *  Palette: Warm stone Studio neutrals + restrained green CTA
+ *  Typeface: Aribau Grotesk
  * ============================================================
  */
 @theme {
@@ -19,11 +20,11 @@
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
-  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
-     this resolves to the reader's platform mono, which is what a developer
-     already reads code in. Never use it for UI copy or data. */
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+  /* Source code only (CodeBlock, inline Code). JetBrains Mono is bundled so
+     code renders consistently across platforms. Never use it for UI copy or
+     ordinary data. */
+  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular,
+    "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
 
   /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
      spacing grid is unaffected; only text sizes are anchored to 15px. */
@@ -47,27 +48,28 @@
   --text-2xl: 1.625rem;    /* 26px — display */
   --text-2xl--line-height: 2rem;
 
-  /* ---- Neutral ramp — a role-based neutral Gray 12-step light scale. Every
-     channel is equal, so the product stays neutral with no Sand/Sage cast.
-     The light surface steps retain subtle spacing; the solid/text end is
-     perceptually widened so adjacent swatches and UI roles stay distinct.
+  /* ---- Warm ink ramp — a role-based 12-step light scale sampled from the
+     Actioneer product UI. A restrained red/yellow bias gives canvases and
+     fills an ivory/stone character instead of equal-channel grey. The light
+     surface steps retain subtle spacing; the solid/text end is perceptually
+     widened so adjacent swatches and UI roles stay distinct.
      Each step owns a role — 50/100 =
      backgrounds, 200/300/400 = interactive component fills, 500/600/700 =
      borders & separators, 800/850 = solid, 900/950 = accessible text. The
      `ink` name is retained as the stable ADS API. ---- */
-  --color-ink-50: #fcfcfc;  /*  1 · background      */
-  --color-ink-100: #f9f9f9; /*  2 · background      */
-  --color-ink-150: #f5f5f5; /*      canvas          */
-  --color-ink-200: #f0f0f0; /*  3 · interactive     */
-  --color-ink-300: #e8e8e8; /*  4 · interactive     */
-  --color-ink-400: #e0e0e0; /*  5 · interactive     */
-  --color-ink-500: #d9d9d9; /*  6 · border          */
-  --color-ink-600: #cecece; /*  7 · border          */
-  --color-ink-700: #bbbbbb; /*  8 · border          */
-  --color-ink-800: #8d8d8d; /*  9 · solid           */
-  --color-ink-850: #737373; /* 10 · solid           */
-  --color-ink-900: #555555; /* 11 · accessible text */
-  --color-ink-950: #202020; /* 12 · accessible text */
+  --color-ink-50: #fdfcf8;  /*  1 · background      */
+  --color-ink-100: #f9f8f3; /*  2 · background      */
+  --color-ink-150: #f6f6f1; /*      canvas          */
+  --color-ink-200: #f0efeb; /*  3 · interactive     */
+  --color-ink-300: #e8e7e2; /*  4 · interactive     */
+  --color-ink-400: #deded9; /*  5 · interactive     */
+  --color-ink-500: #d5d4cf; /*  6 · border          */
+  --color-ink-600: #c9c8c2; /*  7 · border          */
+  --color-ink-700: #b7b6b0; /*  8 · border          */
+  --color-ink-800: #8d8c86; /*  9 · solid           */
+  --color-ink-850: #70706a; /* 10 · solid           */
+  --color-ink-900: #444440; /* 11 · accessible text */
+  --color-ink-950: #171714; /* 12 · accessible text */
 
   /* ---- Semantic accent ramps ---- */
   /* Success stays a semantic state color, never a product-primary hue. */
@@ -111,18 +113,18 @@
   /* Demo logo indigo — source for artifact canvas wash. */
   --color-brand-mark: #2e1065;
 
-  /* ---- Radii ---- FOUR values, assigned by element scale and role.
-     2px = micro details; 4px = compact controls; 8px = standard controls
-     and floating UI; 16px = cards and large surfaces. The repeated aliases
-     keep the familiar Tailwind role names while capping surfaces at 16px. */
+  /* ---- Radii ---- FOUR restrained values, assigned by element scale.
+     2px = micro details; 4px = compact controls; 6px = standard controls;
+     8px = menus, cards, panels, and large surfaces. Repeated aliases keep the
+     familiar Tailwind role names while capping every surface at 8px. */
   --radius-xs: 0.125rem;  /*  2px · micro details */
   --radius-sm: 0.25rem;   /*  4px · compact controls */
-  --radius-md: 0.5rem;    /*  8px · standard controls */
+  --radius-md: 0.375rem;  /*  6px · standard controls */
   --radius-lg: 0.5rem;    /*  8px · menus and panels */
-  --radius-xl: 1rem;      /* 16px · cards and surfaces */
-  --radius-2xl: 1rem;     /* 16px · large surfaces */
-  --radius-3xl: 1rem;     /* 16px · capped compatibility alias */
-  --radius-4xl: 1rem;     /* 16px · capped compatibility alias */
+  --radius-xl: 0.5rem;    /*  8px · cards and surfaces */
+  --radius-2xl: 0.5rem;   /*  8px · large surfaces */
+  --radius-3xl: 0.5rem;   /*  8px · capped compatibility alias */
+  --radius-4xl: 0.5rem;   /*  8px · capped compatibility alias */
   /* Shape-only exception for avatars, icon buttons, progress tracks, chips,
      and badges. It is not part of the corner-radius scale. */
   --radius-full: 9999px;
@@ -132,19 +134,18 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- Elevation ---- ONE soft token (Claude-panel style).
-     Delineate surfaces with fill color first; add this to gently lift them.
-     The ambient drop sits close (y4, blur16) at low opacity and uses neutral
-     ink — never a cool slate tint that would reintroduce a color cast. */
-  --shadow-elevation: 0 0 0 1px rgb(32 32 32 / 0.03),
-    0 1px 2px 0 rgb(32 32 32 / 0.04),
-    0 4px 16px -6px rgb(32 32 32 / 0.06);
+  /* ---- Elevation ---- ONE restrained Studio token.
+     Delineate surfaces with fill color first; add this only to lift something
+     actionable. A close contact shadow anchors the surface while the large
+     negative spread keeps the ambient shadow soft, quiet, and borderless. */
+  --shadow-elevation: 0 1px 2px rgb(23 23 20 / 0.05),
+    0 8px 20px -16px rgb(23 23 20 / 0.16);
 
   /* 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 ink. */
-  --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);
+     Deep negative spread keeps the edge feathered; the tint is warm ink. */
+  --shadow-table-smudge-left: 8px 0 24px -14px rgb(23 23 20 / 0.05);
+  --shadow-table-smudge-right: -8px 0 24px -14px rgb(23 23 20 / 0.05);
 
   /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
      (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
@@ -158,7 +159,7 @@
     inset 0 8px 16px -8px rgb(255 255 255 / 0.45);
   /* Text fields — a whisper of inset depth so the writing surface reads
      recessed into the page (persists through hover/focus/invalid). */
-  --inner-glow-field: inset 0 1px 2px 0 rgb(32 32 32 / 0.06);
+  --inner-glow-field: inset 0 1px 2px 0 rgb(23 23 20 / 0.06);
 
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
@@ -238,6 +239,11 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
+  /* Primary CTA role — restrained Studio green, used sparingly. */
+  --color-action-primary: var(--action-primary);
+  --color-action-primary-foreground: var(--action-primary-foreground);
+  --color-action-primary-hover: var(--action-primary-hover);
+
   /* Compatibility action role — neutral ink, never a colored primary hue. */
   --color-brand: var(--brand);
   --color-brand-foreground: var(--brand-foreground);
@@ -302,7 +308,7 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  /* Every neutral semantic token below points INTO the ink primitive scale.
+  /* Every warm-neutral semantic token below points INTO the ink primitive scale.
      Only pure white (#ffffff) stays literal: it is a base surface, not a
      neutral scale step. */
   --background: var(--color-ink-100);      /* step 2  · canvas */
@@ -310,12 +316,12 @@
 
   /* Text levels: primary ink-950, secondary ink-900, tertiary a tuned grey.
      All three clear AA (4.5:1) for body copy on every surface they land on.
-     Tertiary is NOT an ink step: ink-800 (#8d8d8d) was AA-large only (2.7:1
-     on muted) but is used at 13px in 200+ places, so it is pinned to the
+     Tertiary is NOT an ink step: ink-850 (#70706a) falls below AA on muted
+     but is used at 13px in 200+ places, so it is pinned to the
      lightest grey that still passes 4.5:1 on bg/card/surface/muted. */
-  --text-primary: var(--color-ink-950);    /* ~16:1  AAA           */
-  --text-secondary: var(--color-ink-900);  /* ~7.1:1 AAA           */
-  --text-tertiary: #686868;                /* ~4.55:1 AA (min surf) */
+  --text-primary: var(--color-ink-950);    /* ~14.5:1 AAA (min surf) */
+  --text-secondary: var(--color-ink-900);  /* ~7.9:1  AAA (min surf) */
+  --text-tertiary: #686863;                /* ~4.52:1 AA  (min surf) */
 
   --surface: var(--color-ink-200);         /* step 3  · tinted canvas */
   --surface-foreground: var(--color-ink-950);
@@ -327,8 +333,15 @@
   --card: #ffffff;                         /* pure white base */
   --card-foreground: var(--color-ink-950);
 
+  /* Studio green is deliberately isolated to the primary CTA role (roughly
+     5–10% of a screen). Selection controls keep using neutral `brand` below,
+     so tabs, switches, radios, and progress never inherit CTA color. */
+  --action-primary: #2f7d5a;
+  --action-primary-foreground: #ffffff;
+  --action-primary-hover: #256749;
+
   /* Neutral action role. The `brand` name remains as a compatibility API,
-     but the product has no colored primary palette. */
+     and shared selection/control states intentionally remain achromatic. */
   --brand: var(--color-ink-950);           /* darkest action ink */
   --brand-foreground: #ffffff;
   --brand-hover: var(--color-ink-900);     /* lighter hover lift */
@@ -340,7 +353,7 @@
   --table-row-hover: color-mix(in srgb, var(--card) 40%, var(--muted));
   --table-row-selected: color-mix(in srgb, var(--card) 10%, var(--muted));
 
-  /* Quiet component fill. Radix step 3 is the first interactive-background
+  /* Quiet component fill. Ink step 3 is the first interactive-background
      step, so this remains visible on both white cards and the step-2 canvas. */
   --fill: var(--color-ink-200);            /* step 3 · default component fill */
   --fill-foreground: var(--color-ink-950);
@@ -348,12 +361,12 @@
   --accent: var(--color-ink-400);          /* step 5 · active / selected wash */
   --accent-foreground: var(--color-ink-950);
 
-  /* Borders use consecutive Radix steps 5–7. This avoids the old 3→5→7 jump:
-     tertiary stays quiet but visible at 0.5px, secondary is the Radix subtle
+  /* Borders use consecutive ink steps 5–7. This avoids the old 3→5→7 jump:
+     tertiary stays quiet but visible at 0.5px, secondary is the subtle
      border step, and primary is the default interactive-control edge. */
-  --border-primary: var(--color-ink-600);   /* step 7 · #cecece · strongest */
-  --border-secondary: var(--color-ink-500); /* step 6 · #d9d9d9 · default   */
-  --border-tertiary: var(--color-ink-400);  /* step 5 · #e0e0e0 · faintest  */
+  --border-primary: var(--color-ink-600);   /* step 7 · #c9c8c2 · strongest */
+  --border-secondary: var(--color-ink-500); /* step 6 · #d5d4cf · default   */
+  --border-tertiary: var(--color-ink-400);  /* step 5 · #deded9 · 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 */
@@ -384,7 +397,7 @@
   --canvas-edge: var(--border-secondary);/* infinite-canvas edges / connectors */
   --texture-ink: var(--color-ink-950);   /* brand-texture / pixel-blast marks */
   --table-shell: var(--color-ink-200);   /* recessed table tray (lighter than muted) */
-  --table-scroll-hint: rgb(32 32 32 / 0.04); /* right-edge "more columns" wash */
+  --table-scroll-hint: rgb(23 23 20 / 0.04); /* right-edge "more columns" wash */
   --surface-inverse: var(--color-ink-950);      /* dark hero / inverse surface base */
   --surface-inverse-soft: var(--color-ink-900); /* dark hero gradient falloff */
   --artifact-canvas: color-mix(in srgb, var(--color-brand-mark) 7%, #ffffff);