feat(rhema-code): add the colors setting with four palettes

The stored `colors` key names a palette — rhema (the default,
Jadeite), aquamarine, black-and-white, or dracula — and the
Appearance page of /settings cycles it live, like the theme and
icon toggles beside it. Each palette carries a dark and a light
appearance under the existing `theme` key; dracula's light side is
derived, the official palette ships only dark.

The appearance decision moves off token comparison: Theme now
answers is_dark() from the ground/text luminance, so palettes
beyond the original two get the right per-profile fallback tones.

web/claw/app/components/AppCallout.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+// The inline callout: a bordered note with a tone — the "restart
+// required"/"changes not applied" voice from the designs. One per
+// situation, inside the page flow, dismissible by the caller.
+defineProps<{
+  variant: 'info' | 'ok' | 'warn' | 'error'
+  title?: string
+  dismissible?: boolean
+}>()
+
+defineEmits<{ dismiss: [] }>()
+
+const marks: Record<string, string> = {
+  info: 'i',
+  ok: '✓',
+  warn: '↺',
+  error: '✗',
+}
+</script>
+
+<template>
+  <div class="callout" :class="variant" role="status">
+    <span class="mark" aria-hidden="true">{{ marks[variant] }}</span>
+    <div class="body">
+      <strong v-if="title" class="title">{{ title }}</strong>
+      <div class="text"><slot /></div>
+    </div>
+    <button v-if="dismissible" class="ghost dismiss" title="dismiss" @click="$emit('dismiss')">
+      ×
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 11px 14px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--info);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--info) 7%, var(--surface));
+}
+
+.callout.ok {
+  border-left-color: var(--ok);
+  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
+}
+
+.callout.warn {
+  border-left-color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 7%, var(--surface));
+}
+
+.callout.error {
+  border-left-color: var(--error);
+  background: color-mix(in srgb, var(--error) 7%, var(--surface));
+}
+
+.mark {
+  flex: none;
+  width: 18px;
+  text-align: center;
+  font-weight: 700;
+  color: var(--info);
+}
+
+.ok .mark {
+  color: var(--ok);
+}
+
+.warn .mark {
+  color: var(--warn);
+}
+
+.error .mark {
+  color: var(--error);
+}
+
+.body {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  display: block;
+  color: var(--text);
+}
+
+.text {
+  color: var(--text2);
+  overflow-wrap: anywhere;
+}
+
+.dismiss {
+  padding: 0 6px;
+  font-size: 14px;
+}
+</style>