design: two-color palette — rename all tokens to --cream / --blue

Replace ochre-clay, carbon-black, burnt-oxide, slate-indigo with clean
two-color system: --cream (#f4f0e8) and --blue (#041cf3). Update every
component, utility class, and test assertion.

src/shared/styles/theme.css

@@ -28,28 +28,26 @@
   --fraunces-wonk: 1;
   --fraunces-soft: 0;
 
-  /* === COLOR PALETTE === */
-  --vibrant-blue: #041cf3;
-  --paper-white: #ffffff;
-  --carbon-black: #121212;
-  --structure-gray: #f2f2f2;
+  /* === COLOR PALETTE: 2-color system === */
+  --cream: #f4f0e8;
+  --blue: #041cf3;
 
   /* === SEMANTIC COLORS === */
-  --background: var(--paper-white);
-  --foreground: var(--carbon-black);
-  --card: var(--paper-white);
-  --card-foreground: var(--carbon-black);
-  --primary: var(--vibrant-blue);
-  --primary-foreground: var(--paper-white);
-  --secondary: var(--structure-gray);
-  --secondary-foreground: var(--carbon-black);
-  --muted: var(--structure-gray);
-  --muted-foreground: #666666;
-  --accent: var(--vibrant-blue);
-  --accent-foreground: var(--paper-white);
-  --destructive: #d4183d;
-  --border: var(--carbon-black);
-  --ring: var(--vibrant-blue);
+  --background: var(--cream);
+  --foreground: var(--blue);
+  --card: var(--cream);
+  --card-foreground: var(--blue);
+  --primary: var(--blue);
+  --primary-foreground: var(--cream);
+  --secondary: var(--cream);
+  --secondary-foreground: var(--blue);
+  --muted: var(--cream);
+  --muted-foreground: rgba(4, 28, 243, 0.5);
+  --accent: var(--blue);
+  --accent-foreground: var(--cream);
+  --destructive: var(--blue);
+  --border: var(--blue);
+  --ring: var(--blue);
 
   /* === SPACING (8pt Linear Scale) === */
   --space-0: 0;
@@ -71,9 +69,9 @@
   --radius: 0px;
 
   /* === BRUTALIST SHADOWS === */
-  --shadow-brutal: 8px 8px 0 var(--carbon-black);
-  --shadow-brutal-sm: 4px 4px 0 var(--carbon-black);
-  --shadow-brutal-lg: 12px 12px 0 var(--carbon-black);
+  --shadow-brutal: 8px 8px 0 var(--blue);
+  --shadow-brutal-sm: 4px 4px 0 var(--blue);
+  --shadow-brutal-lg: 12px 12px 0 var(--blue);
 
   /* === GRID === */
   --grid-gap: var(--space-3);
@@ -83,10 +81,8 @@
   --font-heading: var(--font-fraunces);
   --font-body: var(--font-public-sans);
 
-  --color-ochre-clay: var(--ochre-clay);
-  --color-slate-indigo: var(--slate-indigo);
-  --color-burnt-oxide: var(--burnt-oxide);
-  --color-carbon-black: var(--carbon-black);
+  --color-cream: var(--cream);
+  --color-blue: var(--blue);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-primary: var(--primary);
@@ -124,15 +120,27 @@
     overflow-x: hidden;
   }
 
-  /* Paper grain texture */
+  /* Subtle blue-tinted grain on parchment */
   body::before {
     content: "";
     position: fixed;
     inset: 0;
     background-image:
-      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px),
-      repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px);
-    opacity: 0.4;
+      repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(4, 28, 243, 0.015) 2px,
+        rgba(4, 28, 243, 0.015) 4px
+      ),
+      repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 2px,
+        rgba(4, 28, 243, 0.015) 2px,
+        rgba(4, 28, 243, 0.015) 4px
+      );
+    opacity: 0.6;
     display: block;
     pointer-events: none;
     z-index: 1;
@@ -150,7 +158,7 @@
     font-variation-settings:
       "WONK" var(--fraunces-wonk),
       "SOFT" var(--fraunces-soft);
-    color: var(--carbon-black);
+    color: var(--blue);
   }
 
   h1 {
@@ -173,13 +181,13 @@
     font-family: var(--font-body);
     font-size: var(--text-base);
     font-weight: var(--font-weight-body);
-    color: var(--carbon-black);
+    color: var(--blue);
   }
 
   a {
-    color: var(--burnt-oxide);
+    color: var(--blue);
     text-decoration: none;
-    border-bottom: 2px solid var(--carbon-black);
+    border-bottom: 2px solid var(--blue);
     transition: all 0.2s;
   }
 
@@ -190,7 +198,7 @@
   blockquote {
     font-family: var(--font-heading);
     font-size: var(--text-xl);
-    border-left: var(--border-width) solid var(--carbon-black);
+    border-left: var(--border-width) solid var(--blue);
     padding-left: var(--space-4);
     margin: var(--space-6) 0;
   }
@@ -207,19 +215,19 @@
   box-shadow: var(--shadow-brutal-lg);
 }
 .brutal-border {
-  border: var(--border-width) solid var(--carbon-black);
+  border: var(--border-width) solid var(--blue);
 }
 .brutal-border-top {
-  border-top: var(--border-width) solid var(--carbon-black);
+  border-top: var(--border-width) solid var(--blue);
 }
 .brutal-border-bottom {
-  border-bottom: var(--border-width) solid var(--carbon-black);
+  border-bottom: var(--border-width) solid var(--blue);
 }
 .brutal-border-left {
-  border-left: var(--border-width) solid var(--carbon-black);
+  border-left: var(--border-width) solid var(--blue);
 }
 .brutal-border-right {
-  border-right: var(--border-width) solid var(--carbon-black);
+  border-right: var(--border-width) solid var(--blue);
 }
 
 /* Animations */