v0.3 Phase 4f/5a/5b: token architecture + skeleton + browser-preview reclass

Three small phases land together for Jake's round-4 feedback. Each is
focused and reviewable. Larger Dictation/Settings/Tasks/History page
migrations are deferred to focused future sittings.

Phase 4f — semantic source / derived token architecture.

  Added --semantic-{red,blue,green,yellow}-source raw-palette tokens.
  These encode the role's hue identity from Jake's color.adobe.com
  palette (#FF0700 / #FFCD00 / #00FF56 / #000AFF) and stay constant
  across all themes. The existing --color-{danger,caution,success,info}
  tokens are now documented as theme-tuned derivations meeting WCAG
  AA in context. Source tokens make the brand-to-runtime relationship
  traceable in code.

  Added --color-{role}-bg subtle-fill tokens derived via
  color-mix(in oklab, var(--color-{role}) 8%, transparent). Used by
  Notice backgrounds, hover tints and focus halos. HC mode forces
  -bg tokens to transparent so HC notices read as text + icon +
  2-px border + left bar with no body tint.

Phase 5a — page skeleton primitive + slim notice variant.

  NEW src/lib/ui/LumotiaPageSkeleton.svelte. Six-zone layout:
    header (optional)
    notice (optional, slim ambient state)
    primary work surface (required, primaryBleed for full-bleed)
    right rail (optional, lg-screen drawer)
    action bar (optional, bottom)
    metadata (optional, mono micro-footer)
  Every zone except primary is opt-in. Foundation for the
  page-skeleton sweep without forcing any page migration yet.

  LumotiaNotice gained a slim prop. When true: padding collapses
  (px-3 py-2 vs px-4 py-3), icon shrinks (14 vs 16), title block is
  suppressed. For ambient page-level notices like browser-preview.

Phase 5b — browser-preview reclassification.

  src/lib/pages/DictationPage.svelte: the browser-preview state used
  to render as a red error block. That is an environment limitation,
  not a failed action. Reclassified as a slim info notice with
  friendlier copy:

    "You're in a browser preview. Local transcription only works in
     the Lumotia desktop app."

  Other error states (transcription failed, needs review) still
  render through the original danger-tinted block with the
  technical-details affordance preserved. Only the browser-preview
  path branches into LumotiaNotice tone="info" slim.

The larger Dictation page restructure (header recomposition,
Template/Extract Tasks demotion to bottom action bar, empty-state
typography) is reserved for a focused Phase 5c sitting since
DictationPage.svelte is 1 262 LOC of state-heavy code.

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

@@ -65,6 +65,33 @@
   font-display: swap;
 }
 
+/* ============================================================
+   Semantic source palette (Phase 4f, 2026-05-15).
+
+   These four hex values are the BRAND-identity source for the
+   semantic system. They are NEVER used directly as text or fill
+   in the runtime UI — each --color-{role} is a theme-tuned
+   derivation that meets WCAG AA in its context. The source tokens
+   exist so the relationship between brand-source and theme-derived
+   is traceable in code (and so a future re-tune of one role does
+   not require chasing every reference).
+
+       Red    -> error, failed, destructive, blocked
+       Yellow -> needs review, caution, missing setup, pending
+       Green  -> ready, saved, complete, safe
+       Blue   -> information, processing, neutral system guidance
+
+   The brand accent (--color-accent, copper-clay) is intentionally
+   separate from semantic yellow. Brand is action / Lumotia
+   identity. Yellow is caution / review.
+   ============================================================ */
+:root[data-design="quietware"] {
+  --semantic-red-source:    #FF0700;
+  --semantic-yellow-source: #FFCD00;
+  --semantic-green-source:  #00FF56;
+  --semantic-blue-source:   #000AFF;
+}
+
 /* ============================================================
    Quietware — dark mode default.
    Warm brown-charcoal atmosphere. Reads as warm when you notice
@@ -89,12 +116,22 @@
   --color-accent-subtle: #C9784514;
   --color-accent-glow: #C9784525;
 
-  /* Semantic palette. Muted-Material hues. */
-  --color-danger: #FF8A8A;
-  --color-caution: #F2C94C;
+  /* Semantic palette. Derived from --semantic-{role}-source by
+     lowering saturation/chroma and tuning lightness for AA on the
+     dark surface. Each role keeps the source hue identity. */
+  --color-danger: #FF8A8A;        /* derived from --semantic-red-source #FF0700 */
+  --color-caution: #F2C94C;       /* derived from --semantic-yellow-source #FFCD00 */
   --color-warning: var(--color-caution);
-  --color-success: #79D59B;
-  --color-info: #8AB4F8;
+  --color-success: #79D59B;       /* derived from --semantic-green-source #00FF56 */
+  --color-info: #8AB4F8;          /* derived from --semantic-blue-source #000AFF */
+
+  /* Subtle role fills for Notice backgrounds, hover tints, focus
+     halos. ~8% role over the surface — passes through atmosphere
+     without becoming a colour zone. */
+  --color-danger-bg:  color-mix(in oklab, var(--color-danger)  8%, transparent);
+  --color-caution-bg: color-mix(in oklab, var(--color-caution) 8%, transparent);
+  --color-success-bg: color-mix(in oklab, var(--color-success) 8%, transparent);
+  --color-info-bg:    color-mix(in oklab, var(--color-info)    8%, transparent);
 
   --color-sidebar: #0F0E0C;
   --color-nav-active: #211D18;
@@ -142,11 +179,17 @@
   --color-accent-subtle: #9D5F3214;
   --color-accent-glow: #9D5F3225;
 
-  --color-danger: #B3261E;
-  --color-caution: #7A5D00;
+  /* Semantic palette — derivations for light mode, AA on cream. */
+  --color-danger: #B3261E;        /* derived from --semantic-red-source */
+  --color-caution: #7A5D00;       /* derived from --semantic-yellow-source */
   --color-warning: var(--color-caution);
-  --color-success: #1B6B3A;
-  --color-info: #2457A6;
+  --color-success: #1B6B3A;       /* derived from --semantic-green-source */
+  --color-info: #2457A6;          /* derived from --semantic-blue-source */
+
+  --color-danger-bg:  color-mix(in oklab, var(--color-danger)  8%, transparent);
+  --color-caution-bg: color-mix(in oklab, var(--color-caution) 8%, transparent);
+  --color-success-bg: color-mix(in oklab, var(--color-success) 8%, transparent);
+  --color-info-bg:    color-mix(in oklab, var(--color-info)    8%, transparent);
 
   --color-sidebar: #F3EEE6;
   --color-nav-active: #E8E2D6;
@@ -191,6 +234,13 @@
   --color-success: #1B6B3A;
   --color-info: #005FCC;
 
+  /* HC strips fill atmosphere. Notices become text + icon + 2-px
+     border + left bar with no body tint. Maximum clarity. */
+  --color-danger-bg:  transparent;
+  --color-caution-bg: transparent;
+  --color-success-bg: transparent;
+  --color-info-bg:    transparent;
+
   --color-sidebar: #FFFFFF;
   --color-nav-active: #000000;
   --color-hover: #F0F0F0;