@actioneer/ads 0.6.0 → 0.7.0

package/styles.css

@@ -39,7 +39,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: Warm stone Studio neutrals + restrained green CTA
+ *  Palette: soft neutral 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 · NG1…NG12 = Neutral 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. ---- */
+  --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-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-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-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);
 
   /* ---- 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 NG12.
+     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 neutral 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 */
 }
 
 /*
@@ -255,7 +341,15 @@
   --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);
@@ -269,11 +363,15 @@
 
   --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,27 +379,31 @@
   --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);
   --color-table-shell: var(--table-shell);
+  --color-table-stroke: var(--table-stroke);
+  --color-table-header-foreground: var(--table-header-foreground);
 
   --color-artifact-canvas: var(--artifact-canvas);
 
   --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-ng12);
   --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);
 
   --color-border-primary: var(--border-primary);
   --color-border-secondary: var(--border-secondary);
@@ -309,6 +411,9 @@
   --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);
   --color-ring: var(--ring);
   --color-overlay: var(--overlay);
 
@@ -320,10 +425,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 +444,79 @@
 
 /* ---- 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 NG; 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);
+  --elevated: var(--color-white);           /* pure white base */
+
+  --muted: var(--color-ng4);               /* step 4 */
+  --muted-foreground: var(--color-ng11);   /* step 11 · readable UI text */
+
+  --card: var(--color-white);               /* pure white base */
+  --card-foreground: var(--color-ng12);
 
   /* 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-ng12);              /* darkest neutral action */
+  --brand-foreground: var(--color-white);
+  --brand-hover: var(--color-ng11);        /* lighter hover lift */
+  --brand-text: var(--color-ng12);         /* 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);
+
+  /* Quiet component fill. NG3 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-ng3);                /* step 3 · default component fill */
+  --fill-foreground: var(--color-ng12);
+
+  --accent: var(--color-ng5);              /* step 5 · active / selected wash */
+  --accent-foreground: var(--color-ng12);
+
+  /* Every neutral border stays within the consecutive NG3–NG5 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  */
   /* 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-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 */
+  --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 +524,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-ng12) 50%, transparent);    /* NG12 @ 50% */
+  --overlay: color-mix(in srgb, var(--color-ng12) 50%, transparent); /* NG12 @ 50% */
+
+  /* Functional / domain tokens — named for their render role, pointing into
+     the canonical NG 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-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-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-ng12);      /* 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 */
+  --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 +568,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 +593,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 +625,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 +647,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-ng4);
+  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
@@ -651,44 +813,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 +941,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.
  */
@@ -852,13 +976,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 +993,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 +1123,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,8 +1150,8 @@
   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);
 }