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/lib/ui/LumotiaNotice.svelte

@@ -32,6 +32,9 @@
     title?: string;
     dismissible?: boolean;
     onDismiss?: () => void;
+    /** Slim variant collapses to a single line with no title block.
+        For ambient page-level notices (eg. "You're in browser preview"). */
+    slim?: boolean;
     children?: Snippet;
     classes?: string;
   }
@@ -41,6 +44,7 @@
     title,
     dismissible = false,
     onDismiss,
+    slim = false,
     children,
     classes = "",
   }: Props = $props();
@@ -85,13 +89,13 @@
 
 <div
   role={ariaRole}
-  class="px-4 py-3 rounded-r-lg rounded-l-sm border border-l-4
-    text-[13px] flex items-start gap-2.5
+  class="rounded-r-lg rounded-l-sm border border-l-4 text-[13px] flex gap-2.5
+    {slim ? 'px-3 py-2 items-center' : 'px-4 py-3 items-start'}
     {tonePal.bar} {tonePal.border} {tonePal.bg} {classes}"
 >
-  <ToneIcon size={16} class="mt-0.5 shrink-0 {tonePal.iconColor}" aria-hidden="true" />
+  <ToneIcon size={slim ? 14 : 16} class="shrink-0 {slim ? '' : 'mt-0.5'} {tonePal.iconColor}" aria-hidden="true" />
   <div class="flex-1 min-w-0 leading-relaxed text-text">
-    {#if title}
+    {#if title && !slim}
       <p class="font-semibold text-text mb-1">{title}</p>
     {/if}
     {#if children}{@render children()}{/if}