v0.2 Phase 3: additive semantic tokens + KI-05 resolution

Additive token grammar (no renames, no replacements):

- --color-caution (dark #e8be4a, light #a08a1f) becomes the canonical
  name for tuned-amber notice surfaces in the new wrapper grammar
- --color-warning is kept as a CSS var() alias of --color-caution so
  every existing text-warning / bg-warning call site stays valid
- --color-info (dark #7a9ec0, light #3d6a8a) is the soft blue-grey
  signal for the new LumotiaNotice info variant
- --color-accent-environment (dark #8fae9a, light #4a7058) is an
  optional sage/moss support token for empty-state illustrations
  and environment-neutral status dots. NOT a brand swap — amber/
  copper --color-accent stays primary

Mirrored in src/design-system/colors_and_type.css (the buildless
preview pages bypass Tailwind so the duplication is intentional).

KI-05 resolved in the same commit, per the plan:

- src/lib/types/app.ts: drop `theme` from SettingsState
- src/lib/stores/page.svelte.ts: drop `theme: "Dark"` from defaults
- src/routes/+layout.svelte: drop the migration $effect, add a
  one-shot migrateLegacyTheme() on mount that copies any historical
  lumotia_settings.theme into preferences.theme and strips the
  legacy field. Idempotent — subsequent loads short-circuit
- src/routes/{float,viewer,preview}/+layout@.svelte: drop the same
  $effect; secondary windows inherit theme via PREFERENCES_CHANGED_EVENT
- src/lib/pages/SettingsPage.svelte: both SegmentedButton bindings
  (quick-settings row at :1272, Appearance group at :2606) now use
  Svelte 5 function bindings ({ get, set }) backed by prefs.theme
  and updatePreferences. No SegmentedButton API change

Phase 3 per-page gate green: npm run check (0/0/4129 files),
npm test (13/13), npm run test:e2e (16/16). No regressions in
the Phase 1 smoke baseline.

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

src/lib/pages/SettingsPage.svelte

@@ -1269,7 +1269,14 @@
       <div class="grid grid-cols-3 gap-3 px-1 pb-4 border-b border-border-subtle mb-2">
         <div>
           <p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Theme</p>
-          <SegmentedButton size="small" options={["Dark", "Light"]} bind:value={settings.theme} />
+          <SegmentedButton
+            size="small"
+            options={["Dark", "Light"]}
+            bind:value={
+              () => prefs.theme === "light" ? "Light" : "Dark",
+              (v) => updatePreferences({ theme: v === "Light" ? "light" : "dark" })
+            }
+          />
         </div>
         <div>
           <p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Font size</p>
@@ -2603,7 +2610,13 @@
           <div class="animate-fade-in">
             <div class="mb-6">
               <p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Theme</p>
-              <SegmentedButton options={["Dark", "Light", "System"]} bind:value={settings.theme} />
+              <SegmentedButton
+                options={["Dark", "Light", "System"]}
+                bind:value={
+                  () => prefs.theme === "light" ? "Light" : prefs.theme === "system" ? "System" : "Dark",
+                  (v) => updatePreferences({ theme: v === "Light" ? "light" : v === "System" ? "system" : "dark" })
+                }
+              />
             </div>
 
             <div class="mb-6">