v0.3 Phase 4h: counterlines test on LumotiaNotice

Test commit for Jake's round-6 spec. Subtle 1-px inset shadow in a
softened complementary hue, applied to LumotiaNotice only. Other
test surfaces (Button.destructive, status pills, record ring, active
nav) reserved for after evaluation.

Tokens (quietware scope only, v0.2 surface unchanged):

  --counterline-width: 1px

  Raw complementary hues per Jake's table:
    --role-info-counterline    var(--color-accent)  /* copper for blue */
    --role-danger-counterline  #6EA8FF              /* soft blue for red */
    --role-success-counterline #B891FF              /* soft violet for green */
    --role-caution-counterline #3A6BFF              /* soft blue for yellow */

  Tinted per-mode via color-mix:
    Dark mode:   32% opacity (slightly stronger against dark surface)
    Light mode:  22% opacity (whisper-quiet against cream)
    HC mode:     all transparent, --counterline-width: 0

  Per-usage notice tokens emitted:
    --notice-{role}-counterline

LumotiaNotice applies via Tailwind arbitrary value:

  shadow-[inset_0_0_0_var(--counterline-width,0)_var(--notice-{tone}-counterline,transparent)]

HC contract zeroes both the width and the colour token so the 2-px
HC border carries the tactile detail instead.

Honest evaluation of the visible result.

  At 1px and 22%/32% opacity the counterline is implemented
  correctly but reads as whisper-quiet to the point of being almost
  invisible at standard viewing zoom. Doesn't look noisy (the risk
  Jake flagged), but also doesn't add perceptible tactility.

  Pending Jake's call:
    (a) raise opacity to ~45% dark / ~35% light for visibility,
    (b) keep at current opacity for the quietness,
    (c) revert and proceed Phase 5c.

  Phase 5c proceeds either way; this commit does NOT block the
  layout migration.

Verified.

  - npm run check: 0 errors, 0 warnings across 5707 files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/design-system/v0.3-quietware-tokens.css

@@ -217,6 +217,31 @@
 
   --quietware-texture-opacity: var(--grain-opacity);
   --quietware-texture-color: rgba(243, 239, 231, 1);
+
+  /* ----------------------------------------------------------
+     Phase 4h — counterlines (test).
+     Tactile-only 1-px inner-shadow detail using a softened
+     complementary hue. NOT a second semantic signal — meaning is
+     still carried by signal + icon + label. HC contract zeroes
+     the width.
+     ---------------------------------------------------------- */
+  --counterline-width: 1px;
+
+  /* Raw complementary hues per Jake's spec. */
+  --role-info-counterline:    var(--color-accent);
+  --role-danger-counterline:  #6EA8FF;
+  --role-success-counterline: #B891FF;
+  --role-caution-counterline: #3A6BFF;
+
+  /* Tinted per theme. Dark mode uses 32% opacity (~slightly stronger
+     so it reads against the dark surface). Per-usage aliases so
+     components subscribe semantically. */
+  --notice-info-counterline:    color-mix(in srgb, var(--role-info-counterline) 32%, transparent);
+  --notice-danger-counterline:  color-mix(in srgb, var(--role-danger-counterline) 32%, transparent);
+  --notice-success-counterline: color-mix(in srgb, var(--role-success-counterline) 32%, transparent);
+  --notice-caution-counterline: color-mix(in srgb, var(--role-caution-counterline) 32%, transparent);
+
+  --button-danger-counterline:  var(--notice-danger-counterline);
 }
 
 /* ============================================================
@@ -299,6 +324,15 @@
   --grain-opacity: 0.07;
   --quietware-texture-opacity: var(--grain-opacity);
   --quietware-texture-color: rgba(29, 27, 24, 1);
+
+  /* Phase 4h light-mode counterlines. Lower opacity (22%) so the
+     detail stays whisper-quiet against the cream surface. */
+  --notice-info-counterline:    color-mix(in srgb, var(--role-info-counterline) 22%, transparent);
+  --notice-danger-counterline:  color-mix(in srgb, var(--role-danger-counterline) 22%, transparent);
+  --notice-success-counterline: color-mix(in srgb, var(--role-success-counterline) 22%, transparent);
+  --notice-caution-counterline: color-mix(in srgb, var(--role-caution-counterline) 22%, transparent);
+
+  --button-danger-counterline:  var(--notice-danger-counterline);
 }
 
 /* ============================================================
@@ -383,6 +417,15 @@
   --panel-radius: 8px;
   --quietware-texture-opacity: 0;
   --quietware-texture-color: rgba(0, 0, 0, 0);
+
+  /* HC contract: counterlines disabled (the 2-px HC border IS the
+     tactile detail in this mode). */
+  --counterline-width: 0;
+  --notice-info-counterline:    transparent;
+  --notice-danger-counterline:  transparent;
+  --notice-success-counterline: transparent;
+  --notice-caution-counterline: transparent;
+  --button-danger-counterline:  transparent;
 }
 
 /* Dark-base high-contrast — black background, white borders. Used