@actioneer/ads 0.6.0 → 0.8.0

package/styles.css

@@ -39,7 +39,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: Warm stone Studio neutrals + restrained green CTA
+ *  Palette: warm greys + product green
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -57,86 +57,160 @@
   --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. */
-  /* SIX sizes only — a deliberately small ladder (captions → display).
-     Don't reintroduce 2xs/3xl/4xl or in-between steps; if a size feels
-     missing, the answer is weight/color, not a new size. */
-  --text-xs: 0.8125rem;    /* 13px — the FLOOR: captions, secondary text, table cells, keycaps */
-  --text-xs--line-height: 1.125rem;
-  /* text-sm is aliased to text-xs (both 13px). The scale is intentionally
-     13 · 15 · 17 · 21 · 26 with no in-between tier — keeping the token
-     pointed at 13px stops any stray `text-sm` from falling back to
-     Tailwind's default 14px, which would land off the scale. */
-  --text-sm: 0.8125rem;
-  --text-sm--line-height: 1.125rem;
-  --text-base: 0.9375rem;  /* 15px — BASE body */
-  --text-base--line-height: 1.375rem;
-  --text-lg: 1.0625rem;    /* 17px — emphasized body, section headings */
-  --text-lg--line-height: 1.5rem;
-  --text-xl: 1.3125rem;    /* 21px — page titles */
-  --text-xl--line-height: 1.75rem;
-  --text-2xl: 1.625rem;    /* 26px — display */
-  --text-2xl--line-height: 2rem;
-
-  /* ---- 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: #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 */
+  /* ---- 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);
+  --text-sm: var(--text-s);
+  --text-sm--line-height: var(--text-s--line-height);
+  --text-base: var(--text-m);
+  --text-base--line-height: var(--text-m--line-height);
+  --text-lg: var(--text-l);
+  --text-lg--line-height: var(--text-l--line-height);
+
+  /* ---- Foundation palette ----
+     Canonical primitive names:
+     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 WG3–WG5. ---- */
+  --color-g1: #f7f9f7;
+  --color-g2: #eef5f0;
+  --color-g3: #e2efe5;
+  --color-g4: #cce4d2;
+  --color-g5: #b4d8be;
+  --color-g6: #9bcbaa;
+  --color-g7: #7db78f;
+  --color-g8: #5c9c73;
+  --color-g9: #398457;
+  --color-g10: #2b7348;
+  --color-g11: #1f623b;
+  --color-g12: #183c28;
+
+  --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;
+
+  /* Compatibility aliases preserve the existing ADS utility/API surface. */
+  --color-green-50: var(--color-g1);
+  --color-green-100: var(--color-g2);
+  --color-green-200: var(--color-g3);
+  --color-green-300: var(--color-g4);
+  --color-green-400: var(--color-g5);
+  --color-green-500: var(--color-g6);
+  --color-green-600: var(--color-g7);
+  --color-green-700: var(--color-g8);
+  --color-green-800: var(--color-g9);
+  --color-green-850: var(--color-g10);
+  --color-green-900: var(--color-g11);
+  --color-green-950: var(--color-g12);
+
+  --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 stays a semantic state color, never a product-primary hue. */
-  --color-success-50: #ecfdf5;
-  --color-success-100: #d1fae5;
-  --color-success-500: #10b981;
-  --color-success-600: #059669;
-  --color-success-700: #047857;
+  /* Success uses the lichen lime family and stays status-only. The original
+     soft/base/deep anchors map to 50/500/600; 100 and 400 bridge the soft fill
+     and base, while 700 deepens the family enough for AA text on White. */
+  --color-success-50: #e4efcf;
+  --color-success-100: #d4e5b5;
+  --color-success-300: #c4dc9b;
+  --color-success-400: #b4d281;
+  --color-success-500: #a3c765;
+  --color-success-600: #6e8f30;
+  --color-success-700: #516923;
 
   --color-warning-50: #fffaeb;
   --color-warning-100: #fef0c7;
+  --color-warning-300: #f9d68f;
+  --color-warning-400: #f4bc57;
   --color-warning-500: #f79009;
   --color-warning-600: #dc6803;
   --color-warning-700: #b54708;
 
   --color-danger-50: #fef3f2;
   --color-danger-100: #fee4e2;
+  --color-danger-300: #f8bab5;
+  --color-danger-400: #f18f87;
   --color-danger-500: #f04438;
   --color-danger-600: #d92d20;
   --color-danger-700: #b42318;
 
   --color-info-50: #eff8ff;
   --color-info-100: #d1e9ff;
+  --color-info-300: #a7d3f8;
+  --color-info-400: #7dbdf1;
   --color-info-500: #2e90fa;
   --color-info-600: #1570ef;
   --color-info-700: #175cd3;
 
-  /* ---- Data-viz accents ---- three small ramps for charts & illustration.
+  /* ---- Data-viz accents ---- two small ramps for charts & illustration.
      deep = text/lines · base = fills · soft = backgrounds. Separate from the
      semantic status ramps above; these carry data, not product identity. */
   --color-cyan-soft: #c7efe9;  /* Cyan — vivid cool contrast; 2nd series, links */
   --color-cyan-base: #12b5a5;
   --color-cyan-deep: #0a7e82;
-  --color-lime-soft: #e4efcf;  /* Lichen lime — energetic pop from the mark */
-  --color-lime-base: #a3c765;
-  --color-lime-deep: #6e8f30;
   --color-amber-soft: #fce6c0; /* Amber — warm pop; highlights, "new" */
   --color-amber-base: #f3a72e;
   --color-amber-deep: #b57414;
@@ -144,18 +218,21 @@
   /* Demo logo indigo — source for artifact canvas wash. */
   --color-brand-mark: #2e1065;
 
-  /* ---- 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. */
+  /* ---- Radii ---- five canonical steps: XS · S · M · L · XL.
+     M (6px) is the default corner radius. */
   --radius-xs: 0.125rem;  /*  2px · micro details */
-  --radius-sm: 0.25rem;   /*  4px · compact controls */
-  --radius-md: 0.375rem;  /*  6px · standard controls */
-  --radius-lg: 0.5rem;    /*  8px · menus and panels */
-  --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 */
+  --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 */
+
+  /* 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);
   /* Shape-only exception for avatars, icon buttons, progress tracks, chips,
      and badges. It is not part of the corner-radius scale. */
   --radius-full: 9999px;
@@ -165,32 +242,40 @@
      convention). */
   --radius-dot: 2px;
 
-  /* ---- 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);
+  /* ---- 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);
+  --shadow-200: 0 3px 1px -1px rgb(32 32 32 / 0.07);
+  --shadow-300: 0 4px 6px -2px rgb(32 32 32 / 0.2);
+  --shadow-400: 0 8px 16px -4px rgb(32 32 32 / 0.22);
+  --shadow-500: 0 12px 20px -8px rgb(32 32 32 / 0.24);
+  --shadow-600: 0 20px 20px -8px rgb(32 32 32 / 0.28);
+
+  /* Compatibility hook stays flat. Apply a numbered level only when the user
+     explicitly requests elevation for a named surface. */
+  --shadow-elevation: var(--shadow-0);
 
   /* 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 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
-     inner glow from the top and bottom, so a solid CTA reads as lit from within. */
-  --inner-glow-cta: inset 0 1px 0 0 rgb(255 255 255 / 0.25),
-    inset 0 10px 22px -10px rgb(255 255 255 / 0.28),
-    inset 0 -10px 22px -10px rgb(255 255 255 / 0.16);
-  /* Light-fill sibling — the same lit-from-within read for secondary/soft
-     buttons (white catch reads on gray fills at higher opacity). */
-  --inner-glow-fill: inset 0 1px 0 0 rgb(255 255 255 / 0.7),
-    inset 0 8px 16px -8px rgb(255 255 255 / 0.45);
+     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);
+
+  /* ---- Button inset depth ---- Polaris-inspired stacked inner edges. The
+     lower contact line, quiet inner outline, and half-pixel top catch make
+     solid actions feel tactile without adding a decorative outer border. */
+  --inner-glow-cta: inset 0 -1px 0 1px rgb(32 32 32 / 0.22),
+    inset 0 0 0 1px rgb(32 32 32 / 0.12),
+    inset 0 0.5px 0 1.5px rgb(255 255 255 / 0.28);
+  /* Compatibility treatment for explicitly raised light fills. Its visible
+     edge is entirely inset, so it keeps a transparent outer border. */
+  --inner-glow-fill: inset 0 -1px 0 0 var(--border-primary),
+    inset 0 0 0 1px rgb(32 32 32 / 0.1),
+    inset 0 0.5px 0 1.5px rgb(255 255 255 / 0.86);
   /* 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(23 23 20 / 0.06);
+  --inner-glow-field: inset 0 1px 2px 0 rgb(32 32 32 / 0.06);
 
   /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
   --sidebar-width: 15rem; /* 240px — primary nav rail */
@@ -199,7 +284,7 @@
   --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-base); /* 15px — sidebar actions, items, history, and account 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 */
   --panel-header-height: 2.75rem; /* 44px — Panel / toolbar header */
   --aside-width: 20rem; /* 320px — right-hand panel column */
@@ -213,10 +298,11 @@
   --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-2xl);
+  --composer-radius: var(--radius-xl);
   --composer-padding: 0.5rem;
-  --composer-placeholder-max-h: calc(var(--text-base--line-height) * 2); /* rotating placeholder clamp — two lines of the input's own rhythm, so it can never overlap the accessory row */
+  --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 */
+  --ask-hero-min-height: 30rem; /* keeps the empty-state prompt visually primary before recent work */
 }
 
 /*
@@ -252,28 +338,44 @@
  * @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);
 
-  /* Text hierarchy — three accessible levels (all ≥ AA on --background) */
+  /* Contextual text hierarchies — three accessible levels per surface. */
+  --color-on-white-primary: var(--text-on-white-primary);
+  --color-on-white-secondary: var(--text-on-white-secondary);
+  --color-on-white-tertiary: var(--text-on-white-tertiary);
+  --color-on-warm-grey-primary: var(--text-on-warm-grey-primary);
+  --color-on-warm-grey-secondary: var(--text-on-warm-grey-secondary);
+  --color-on-warm-grey-tertiary: var(--text-on-warm-grey-tertiary);
+
+  /* Context-free compatibility aliases remain conservative. */
   --color-primary: var(--text-primary);
   --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);
 
   /* 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);
+  --color-action-primary-text: var(--action-primary-text);
+  --color-action-primary-soft: var(--action-primary-soft);
+  --color-field-focus: var(--field-focus);
 
   /* Compatibility action role — neutral ink, never a colored primary hue. */
   --color-brand: var(--brand);
@@ -281,34 +383,47 @@
   --color-brand-hover: var(--brand-hover);
   --color-brand-text: var(--brand-text);
 
-  /* Quiet fill — secondary buttons, avatars, chips */
+  /* 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);
 
-  /* success-700 on white = 5.48:1 (600 was 3.77:1, failed AA). */
+  /* Lichen success-700 clears AA on White and both success soft fills;
+     success-600 is reserved for non-text marks because its 3.73:1 contrast
+     on White does not clear body-text AA. */
   --color-success: var(--color-success-700);
-  --color-success-foreground: #ffffff;
+  --color-success-foreground: var(--color-white);
   /* 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-ink-950);
+  --color-warning-foreground: var(--color-wg12);
+  /* Danger and info: solid semantic fills carrying white foregrounds. */
   --color-danger: var(--color-danger-600);
-  --color-danger-foreground: #ffffff;
+  --color-danger-foreground: var(--color-white);
   --color-info: var(--color-info-600);
-  --color-info-foreground: #ffffff;
+  --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);
   --color-border: var(--border);
   --color-border-strong: var(--border-strong);
   --color-input: var(--input);
+  --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);
 
@@ -320,10 +435,10 @@
    * shadcn's grey/black defaults. The raw --sidebar-*/--popover values live in
    * :root below.
    */
-  --color-primary-foreground: #ffffff;
-  --color-secondary-foreground: #ffffff;
+  --color-primary-foreground: var(--color-white);
+  --color-secondary-foreground: var(--color-white);
   --color-destructive: var(--color-danger-600);
-  --color-destructive-foreground: #ffffff;
+  --color-destructive-foreground: var(--color-white);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
 
@@ -339,69 +454,78 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  /* 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 */
-  --foreground: var(--color-ink-950);      /* step 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-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);    /* ~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);
-  --elevated: #ffffff;                     /* pure white base */
-
-  --muted: var(--color-ink-300);           /* step 4 */
-  --muted-foreground: var(--color-ink-900);/* step 11 · readable UI text */
-
-  --card: #ffffff;                         /* pure white base */
-  --card-foreground: var(--color-ink-950);
+  /* Surfaces and achromatic text/actions point into WG; the primary CTA
+     points into G. */
+  --background: var(--color-wg2);          /* step 2  · canvas */
+  --foreground: var(--color-wg12);         /* step 12 */
+
+  /* Both surface contexts point directly into the approved WG text steps.
+     WG10 is the tertiary/de-emphasis step and clears AA on White and WG2. */
+  --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-wg10);      /*  5.60: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-wg10);  /*  4.95:1 on WG2 · AA  */
+
+  /* Existing context-free utilities remain compatibility aliases. Their
+     tertiary value stays conservative across WG2–WG4 and White. */
+  --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-wg4);               /* step 4 */
+  --muted-foreground: var(--color-wg11);   /* step 11 · readable UI text */
+
+  --card: var(--color-white);               /* pure white base */
+  --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,
      so tabs, switches, radios, and progress never inherit CTA color. */
-  --action-primary: #2f7d5a;
-  --action-primary-foreground: #ffffff;
-  --action-primary-hover: #256749;
+  --action-primary: var(--color-g9);
+  --action-primary-foreground: var(--color-white);
+  --action-primary-hover: var(--color-g10);
+  --action-primary-text: var(--color-g11);
+  --action-primary-soft: var(--color-g3);
 
   /* Neutral action role. The `brand` name remains as a compatibility API,
      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 */
-  --brand-text: var(--color-ink-950);      /* action text / links */
-
-  /* Table interaction fills are pre-composited and opaque. Sticky edge cells
-     therefore cover horizontally scrolled content while preserving the
-     original quiet bg-card/40-over-muted row hover. */
-  --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. Ink step 3 is the first interactive-background
+  --brand: var(--color-wg12);              /* darkest neutral action */
+  --brand-foreground: var(--color-white);
+  --brand-hover: var(--color-wg11);        /* lighter hover lift */
+  --brand-text: var(--color-wg12);         /* action text / links */
+
+  /* Interactive row hover/focus uses the WG1 highlight wash. */
+  --table-row-hover: var(--color-wg2);
+  --table-row-selected: var(--color-wg1);
+
+  /* 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-ink-200);            /* step 3 · default component fill */
-  --fill-foreground: var(--color-ink-950);
-
-  --accent: var(--color-ink-400);          /* step 5 · active / selected wash */
-  --accent-foreground: var(--color-ink-950);
-
-  /* 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 · #c9c8c2 · strongest */
-  --border-secondary: var(--color-ink-500); /* step 6 · #d5d4cf · default   */
-  --border-tertiary: var(--color-ink-400);  /* step 5 · #deded9 · faintest  */
+  --fill: var(--color-wg3);                /* step 3 · default component fill */
+  --fill-foreground: var(--color-wg12);
+
+  --accent: var(--color-wg5);              /* step 5 · active / selected wash */
+  --accent-foreground: var(--color-wg12);
+
+  /* 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-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(--border-primary);           /* form-control edge */
+  --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
      origin corner as it opens (Dropdown/Popover/Select/Modal…). A soft ink
@@ -409,29 +533,30 @@
      the `Ripple` component. */
   --ripple-tint: color-mix(in srgb, var(--brand) 20%, transparent);
 
-  /* Stroke width — ADS hairlines are 0.5px, not the Tailwind 1px default.
-     The single-width border utilities are overridden to this token at the
-     bottom of this file, so every `border`/`border-t|r|b|l|x|y` reads as a
-     true hairline. Explicit `border-2`+ widths are unaffected. */
-  --stroke-width: 0.5px;
-  --ring: color-mix(in srgb, var(--color-ink-950) 50%, transparent);    /* ink @ 50% */
-  --overlay: color-mix(in srgb, var(--color-ink-950) 50%, transparent); /* ink-950 @ 50% */
-
-  /* Functional / domain tokens — named for their RENDER role, pointing into
-     the ink scale. Components pass these into non-CSS renderers (Recharts,
-     React Flow, the Paper/WebGL texture) so no component carries a raw ink-*
-     value. Same DS pattern as the data-viz --color-chart-* palette. */
+  /* Stroke width — every standard UI border is exactly 1px. */
+  --stroke-width: 1px;
+  --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 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-ink-200);    /* quieter than axes, visible on white */
-  --chart-track: var(--color-ink-200);   /* funnel / progress track */
-  --chart-context: var(--color-ink-500); /* 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-ink-950);   /* brand-texture / pixel-blast marks */
-  --table-shell: var(--color-ink-200);   /* recessed table tray (lighter than muted) */
-  --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);
+  --texture-ink: var(--color-wg12);      /* brand-texture / pixel-blast marks */
+  --table-shell: var(--color-white);     /* simplified single-surface table */
+  --table-stroke: var(--color-wg3);      /* table outline + row separators */
+  --table-header-foreground: var(--color-wg11); /* readable secondary 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
      (or an inline `var(--sidebar)` / `var(--popover)`) resolves to the ADS
@@ -452,9 +577,10 @@
 
 /*
  * ============================================================
- *  Hairline strokes — ADS strokes are 0.5px, not 1px (principle 1).
+ *  Standard strokes — ADS UI borders are 1px (principle 1).
  *  Override Tailwind's single-width border utilities to the
  *  --stroke-width token. Authored after `}
+  .border { border-width: var(--stroke-width); }
   .border-t { border-top-width: var(--stroke-width); }
   .border-r { border-right-width: var(--stroke-width); }
   .border-b { border-bottom-width: var(--stroke-width); }
@@ -476,6 +602,15 @@
   0% { opacity: 0.6; transform: scale(0.15); }
   100% { opacity: 0; transform: scale(1.08); }
 }
+
+@keyframes ads-toast-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
 .ads-ripple {
   position: absolute;
   inset: 0;
@@ -499,12 +634,12 @@
  *  `primary-foreground` companion (its base `--color-primary` is the ADS
  *  text-hierarchy token, which collides with the generated `primary` color),
  *  so the vendored shadcn button's icon rendered invisible (dark-on-dark) on
- *  `bg-primary`. Define the two utilities explicitly against white.
+ *  `bg-primary`. Define the two utilities explicitly against White.
  * ============================================================
  */
 @layer utilities {
-  .text-primary-foreground { color: #ffffff; }
-  .bg-primary-foreground { background-color: #ffffff; }
+  .text-primary-foreground { color: var(--color-white); }
+  .bg-primary-foreground { background-color: var(--color-white); }
 }
 /* ---- Base, keyframes & component helpers ---- */
 /* Hide scrollbars app-wide but keep scrollability. The demo UI is filled
@@ -521,6 +656,42 @@
   display: none;
 }
 
+/* Ask landing: Hex's hierarchy translated into ADS tokens. The same quiet
+   texture spans the complete canvas; G2-G8 concentrate focus at the prompt. */
+.ask-empty-state {
+  background-color: var(--color-white);
+  background-image: radial-gradient(
+    circle,
+    color-mix(in oklab, var(--color-g8) 22%, transparent) 0 0.75px,
+    transparent 0.9px
+  );
+  background-size: 12px 12px;
+}
+
+.ask-empty-hero-pattern {
+  background-image: radial-gradient(
+    ellipse at 50% 52%,
+    color-mix(in oklab, var(--color-g3) 88%, transparent) 0%,
+    color-mix(in oklab, var(--color-g2) 48%, transparent) 38%,
+    transparent 68%
+  );
+}
+
+.ask-empty-composer [data-slot="aui_composer-shell"] {
+  border-color: var(--color-wg4);
+  box-shadow: var(--shadow-200);
+}
+
+.ask-empty-composer:focus-within [data-slot="aui_composer-shell"] {
+  border-color: var(--color-g8);
+  box-shadow: 0 0 0 3px var(--color-g4), var(--shadow-300);
+}
+
+.ask-section-label {
+  font-size: 0.6875rem;
+  line-height: 1rem;
+}
+
 /* Artifact widgets are positioned by GridStack; ADS cards own the visible
    surface while the library content wrapper only clips during interaction.
    The subtle elevation lives on the wrapper (not the inner card) because the
@@ -618,11 +789,11 @@
    halftone dissolves from the BOTTOM upward (a soft mask band sweeps up
    through it) while the whole layer drifts up and fades — cloud cover
    breaking and rising, not a curtain covering it. The mask rests fully
-   opaque (element aligned with the black end of an oversized gradient), and
+   opaque (element aligned with the ink end of an oversized gradient), and
    the lifted state slides the element to the transparent end. */
 .ads-texture-lift {
-  mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
-  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
+  mask-image: linear-gradient(to top, transparent 0%, transparent 42%, var(--color-wg12) 58%, var(--color-wg12) 100%);
+  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 42%, var(--color-wg12) 58%, var(--color-wg12) 100%);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-size: 100% 240%;
@@ -651,44 +822,6 @@
   }
 }
 
-/* BrandLoader (src/components/brand-loader.tsx): each cell of the growth mark
-   flickers on like a neon tube — hard cuts (steps(1)): off → on with a
-   stutter → hold → off — on a staggered loop. fill-mode backwards keeps a
-   cell dark through its delay, so the mark builds up cell by cell. */
-@keyframes brand-flicker {
-  0% {
-    opacity: 0;
-  }
-  6% {
-    opacity: 1;
-  }
-  9% {
-    opacity: 0.15;
-  }
-  12% {
-    opacity: 1;
-  }
-  15% {
-    opacity: 0.35;
-  }
-  18%,
-  82% {
-    opacity: 1;
-  }
-  90%,
-  100% {
-    opacity: 0;
-  }
-}
-.brand-loader-cell {
-  animation: brand-flicker 3.4s steps(1) infinite backwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .brand-loader-cell {
-    animation: none; /* static full-opacity mark */
-  }
-}
-
 @layer base {
   * {
     border-color: var(--border);
@@ -817,8 +950,8 @@
 /*
  * Interactive border — a reusable primitive (see src/lib/interactive.ts).
  * Any bordered element opts in with `.ads-interactive` + a trigger class; the
- * border snaps to a solid 100% brand-black stroke on hover and focus — no
- * halo, no elevation, no pulse (a shadow on a form control reads as
+ * border uses its configured hover and active colors — no halo, no elevation,
+ * no pulse (a shadow on a form control reads as
  * actionable-surface elevation, which controls must not claim).
  * Behaviour stays tunable through the CSS custom properties.
  */
@@ -835,7 +968,7 @@
     /* Optional persistent inset (e.g. the field inner glow) — hosts opt in
        via [--glow-inset:var(--inner-glow-field)]; carried through every
        state below so hover/focus/invalid never strip it. */
-    --glow-inset: 0 0 #0000;
+    --glow-inset: 0 0 transparent;
 
     border-color: var(--glow-border-rest);
     box-shadow: var(--glow-inset);
@@ -852,13 +985,13 @@
     box-shadow: var(--glow-inset);
   }
 
-  /* Focus / focus-within: solid brand-black 1px stroke, no glow, no pulse.
+  /* Focus / focus-within: configured active stroke, no glow, no pulse.
      Kept plain so form fields read as "this is where I'm typing" without
      the heartbeat animation that came before. */
   .ads-interactive.ads-on-focus:focus:not(:disabled):not([aria-invalid="true"]),
   .ads-interactive.ads-on-focus:focus-visible:not(:disabled):not([aria-invalid="true"]),
   .ads-interactive.ads-on-within:focus-within:not([aria-invalid="true"]) {
-    border-color: var(--brand);
+    border-color: var(--glow-border-active);
     box-shadow: var(--glow-inset);
   }
 
@@ -869,7 +1002,7 @@
   /* Invalid state (form fields) */
   .ads-interactive[aria-invalid="true"] {
     border-color: var(--color-danger-600);
-    box-shadow: 0 0 0 3px var(--color-danger-100);
+    box-shadow: none;
   }
 }
 
@@ -999,7 +1132,7 @@
   position: absolute;
   inset-block: 0;
   left: 0;
-  border-left: 1px solid var(--border-strong);
+  border-left: 1px solid var(--tree-stroke);
 }
 .ads-tree-rail:first-child::before,
 .ads-tree-branch:first-child::before {
@@ -1026,20 +1159,16 @@
   top: 0;
   height: var(--tree-elbow, 1.125rem);
   width: 1rem;
-  border-bottom: 1px solid var(--border-strong);
-  border-left: 1px solid var(--border-strong);
+  border-bottom: 1px solid var(--tree-stroke);
+  border-left: 1px solid var(--tree-stroke);
   border-bottom-left-radius: var(--radius-lg);
 }
 
 /* Comments become a placement mode while the comments panel is open. Keep
-   the native cursor readable while giving it the same compact ADS chat mark
-   used by the rest of the Artifact UI. */
+   the native cursor readable while keeping placement precise. */
 .artifact-comment-cursor,
 .artifact-comment-cursor * {
-  cursor:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12' fill='white' stroke='%23242424' stroke-width='1.5'/%3E%3Cpath d='M8.5 9.5h11v7h-5.5l-3.5 3v-3h-2z' fill='%23242424'/%3E%3C/svg%3E")
-      5 5,
-    crosshair !important;
+  cursor: crosshair !important;
 }
 /* Let the consumer's Tailwind discover the classes ADS components use. */
 @source "./**/*.{js,mjs}";