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/entities/experience/ui/ExperienceCard.test.tsx

@@ -37,10 +37,10 @@ describe('ExperienceCard', () => {
       expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer');
     });
 
-    it('period badge has brutal-border, bg-carbon-black, text-ochre-clay, text-sm', () => {
+    it('period badge has brutal-border, bg-blue, text-cream, text-sm', () => {
       render(<ExperienceCard {...DEFAULT_PROPS} />);
       const badge = screen.getByText('2021 – 2024');
-      expect(badge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm');
+      expect(badge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
     });
 
     it('company paragraph has opacity-80', () => {

src/entities/experience/ui/ExperienceCard.tsx

@@ -34,7 +34,7 @@ export function ExperienceCard({ title, company, period, description, className
           <h4>{title}</h4>
           <p className="text-base opacity-80">{company}</p>
         </div>
-        <span className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay text-sm self-start">{period}</span>
+        <span className="brutal-border px-4 py-2 bg-blue text-cream text-sm self-start">{period}</span>
       </div>
       <p className="text-base max-w-[700px]">{description}</p>
     </Card>

src/entities/project/ui/DetailedProjectCard.tsx

@@ -49,12 +49,12 @@ export function DetailedProjectCard({ title, year, role, stack, description, det
       </div>
 
       <div className="lg:col-span-10 order-1 lg:order-2">
-        <Card background="white">
+        <Card>
           <h3>{title}</h3>
           <p className="text-lg mb-6">{description}</p>
 
           {imageUrl && (
-            <div className="brutal-border aspect-video bg-slate-indigo overflow-hidden relative">
+            <div className="brutal-border aspect-video bg-blue overflow-hidden relative">
               <Image src={imageUrl} alt={title} fill className="object-cover" />
             </div>
           )}

src/entities/project/ui/ProjectCard.test.tsx

@@ -47,20 +47,13 @@ describe('ProjectCard', () => {
     it('year badge has correct classes', () => {
       render(<ProjectCard {...DEFAULT_PROPS} />);
       const yearBadge = screen.getByText('2024');
-      expect(yearBadge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm');
+      expect(yearBadge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
     });
 
     it('tags have correct classes', () => {
       render(<ProjectCard {...DEFAULT_PROPS} />);
       const tag = screen.getByText('React');
-      expect(tag).toHaveClass(
-        'brutal-border',
-        'bg-white',
-        'text-carbon-black',
-        'text-sm',
-        'uppercase',
-        'tracking-wide',
-      );
+      expect(tag).toHaveClass('brutal-border', 'bg-cream', 'text-blue', 'text-sm', 'uppercase', 'tracking-wide');
     });
   });
 

src/entities/project/ui/ProjectCard.tsx

@@ -33,29 +33,26 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
     <Card
       className={cn(
         'group hover:translate-x-[2px] hover:translate-y-[2px]',
-        'hover:shadow-[10px_10px_0_var(--carbon-black)] transition-all duration-300',
+        'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
       )}
     >
       <CardHeader>
         <div className="flex flex-row justify-between items-start mb-3">
           <CardTitle className="flex-1">{title}</CardTitle>
-          <span className="brutal-border px-3 py-1 bg-carbon-black text-ochre-clay text-sm">{year}</span>
+          <span className="brutal-border px-3 py-1 bg-blue text-cream text-sm">{year}</span>
         </div>
         <CardDescription>{description}</CardDescription>
       </CardHeader>
 
       {imageUrl && (
-        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden relative">
+        <div className="brutal-border my-6 aspect-video bg-blue overflow-hidden relative">
           <Image src={imageUrl} alt={title} fill className="object-cover" />
         </div>
       )}
 
       <CardContent className="flex flex-wrap gap-2">
         {tags.map((tag) => (
-          <span
-            key={tag}
-            className="brutal-border px-3 py-1 bg-white text-carbon-black text-sm uppercase tracking-wide"
-          >
+          <span key={tag} className="brutal-border px-3 py-1 bg-cream text-blue text-sm uppercase tracking-wide">
             {tag}
           </span>
         ))}