feat: update Makelore modules and conversations

tailwind.config.js

@@ -19,10 +19,10 @@
  *
  *   3. colors — On top of shadcn's semantic tokens (primary / destructive /
  *      ...) we add three Makelore-private groups:
- *        - brand        : Makelore brand blue used for primary CTAs
- *        - skill        : highlight blue for inline /skill chips in chat
- *        - surface.{modal,input,sidebar}: white and low-saturation blue-gray
- *                          layers for the single light product theme.
+ *        - brand        : Makelore orange used for primary CTAs
+ *        - skill        : orange highlight for inline /skill chips in chat
+ *        - surface.{modal,input,sidebar}: white and neutral layers for the
+ *                          single light product theme.
  *
  *   4. Naming — All Makelore-private tokens live under their own top-level
  *      key (`brand`, `skill`, `surface`) instead of being merged into
@@ -65,13 +65,9 @@ module.exports = {
        *             and finally the four Apple/Segoe/Noto color emoji
        *             fonts so emoji never fall back to a serif.
        *
-       *   - serif : Georgia-first display stack used by all page H1/H2.
-       *             Previously written as inline `style={{ fontFamily }}`
-       *             in 17 places — that's been collapsed to this token,
-       *             so `font-serif` alone now reproduces the original
-       *             rendering exactly. (NOTE: deliberately omits
-       *             `ui-serif` — on macOS that resolves to "New York"
-       *             which we explicitly do not want.)
+       *   - serif : compatibility alias for the platform display stack.
+       *             The product now uses one system sans family so page
+       *             hierarchy stays coherent across modules.
        *
        *   - mono  : standard developer-font stack. Used for IDs, paths,
        *             tokens, timestamps, code blocks, CLI output etc.
@@ -94,11 +90,13 @@ module.exports = {
           '"Noto Color Emoji"',
         ],
         serif: [
-          'Georgia',
-          'Cambria',
-          '"Times New Roman"',
-          'Times',
-          'serif',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          '"SF Pro Display"',
+          '"PingFang SC"',
+          '"Segoe UI"',
+          'Roboto',
+          'sans-serif',
         ],
         mono: [
           'ui-monospace',
@@ -162,13 +160,13 @@ module.exports = {
        * Three groups:
        *   A. shadcn standard semantic tokens — read via `hsl(var(--xxx))`
        *      from globals.css. Kept fully compatible.
-       *   B. Makelore brand tokens (brand / skill) — plain hex values for
-       *      the product's single light visual theme.
+       *   B. Makelore brand tokens (brand / skill) — CSS-variable-backed
+       *      values for the product's single light visual theme.
        *   C. Makelore surface tokens (surface.{modal,input,sidebar}) — use
        *      `hsl(var(--surface-xxx) / <alpha-value>)` so the alpha
        *      modifier still works (e.g. `bg-surface-sidebar/60`). The
        *      actual values live in globals.css so every surface follows the
-       *      same white and low-saturation blue-gray visual system.
+       *      same white and neutral visual system.
        *
        * Examples:
        *   - bg-brand                → primary CTA
@@ -206,6 +204,8 @@ module.exports = {
         accent: {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))',
+          soft: 'hsl(var(--accent-soft) / <alpha-value>)',
+          strong: 'hsl(var(--accent-strong))',
         },
         popover: {
           DEFAULT: 'hsl(var(--popover))',
@@ -217,21 +217,23 @@ module.exports = {
         },
 
         // ── B. Makelore brand tokens ────────────────────────────────────
-        // Makelore brand blue used for primary CTAs.
+        // Makelore brand orange used for primary CTAs.
         brand: {
-          DEFAULT: '#3A5578',
-          hover: '#2F4868',
+          DEFAULT: 'hsl(var(--brand))',
+          hover: 'hsl(var(--brand-hover))',
+          soft: 'hsl(var(--brand-soft) / <alpha-value>)',
+          quiet: 'hsl(var(--brand-quiet))',
         },
 
-        // Highlight blue for inline /skill chips in the chat input.
+        // Highlight orange for inline /skill chips in the chat input.
         // The chip combines bg + text + text-shadow to produce a glow
         // effect, so we expose three separate tokens (bg, light fg,
         // dark fg) instead of a 50/100/.../900 ramp — this palette is
         // intentionally not extensible.
         skill: {
-          bg: '#3A5578',          // chip backdrop (used at /14 or /18)
-          fg: '#3A5578',          // chip text (light mode)
-          'fg-dark': '#8FA7C1',   // compatibility value for legacy dark classes
+          bg: 'hsl(var(--brand))',          // chip backdrop (used at /14 or /18)
+          fg: 'hsl(var(--brand))',          // chip text (light mode)
+          'fg-dark': '#F8A58E',   // compatibility value for legacy dark classes
         },
 
         // ── C. Makelore layered surfaces ────────────────────────────────
@@ -242,8 +244,18 @@ module.exports = {
           modal: 'hsl(var(--surface-modal) / <alpha-value>)',
           input: 'hsl(var(--surface-input) / <alpha-value>)',
           sidebar: 'hsl(var(--surface-sidebar) / <alpha-value>)',
+          subtle: 'hsl(var(--surface-subtle) / <alpha-value>)',
+          tertiary: 'hsl(var(--surface-tertiary) / <alpha-value>)',
         },
       },
+      boxShadow: {
+        soft: '0 1px 2px hsl(220 20% 16% / 0.035), 0 12px 30px hsl(220 20% 16% / 0.045)',
+        float: '0 18px 44px hsl(220 20% 16% / 0.10)',
+        focus: '0 0 0 4px hsl(var(--ring) / 0.14)',
+      },
+      transitionTimingFunction: {
+        spring: 'cubic-bezier(0.22, 1, 0.36, 1)',
+      },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',