🎨 Semantic Design System

Current Theme: Default (Deep Blue Void) Philosophy: Content dictates form. Colors are semantic tokens, not static hex codes.

1. The Palette (Tokens)

We use a semantic token system mapped in tailwind.config.js. This allows the entire site to "shed its skin" instantly while maintaining structural integrity.

Token	Class Name	Current Value	Role / Usage
Canvas	`bg-background`	`#020617`	The infinite void behind the content. Base layer.
Surface	`bg-surface`	`#0f172a`	Cards, Sticky Headers, Modals. Slightly elevated layer.
Primary	`bg-primary`	`#135bec`	Call-to-Actions (CTAs), Highlights, Brand Logos.
Text	`text-foreground`	`#e2e8f0`	Headings, Body text (High contrast, usually 90-100% white).
Muted	`text-muted`	`#94a3b8`	Meta data, secondary labels, icons (Low contrast).
Border	`border-border`	`#1e293b`	Subtle dividers, card outlines.

2. Usage Rules (Strict)

To ensure the "Visual Alchemy" works, developers (and AI) must adhere to these rules:

❌ Forbidden

bg-slate-900 (Too specific to a hue)
text-[#888] (Magic numbers)
bg-white (In dark mode contexts without semantic reason)

✅ Required

Use bg-surface for container blocks.
Use text-muted for anything that isn't the main point.
Use border-white/5 or border-white/10 for glassmorphism effects (Overlay mode).

3. Visual Alchemy (How to Change)

This system is designed to be hot-swapped by the AI Image-to-Theme Protocol.