This work corresponds to action item 1 of our Foundation plan,
which we previously discussed via email —
the goal was to replace all manual colors in global CSS with centralized tokens.
By introducing this color token system, we ensure that any color changes made in global.css will automatically propagate across the entire project,
laying the foundation for future custom themes and user-driven color customization.

Description

This PR focuses on implementing a comprehensive color token system to replace all hardcoded colors with centralized, maintainable tokens.
The refactoring introduces a breaking change to ensure consistent theming and easy customization across the entire project.

Changes

• 🎨 Color Token System (major refactor): Created a centralized token system with token.css for primitive colors and semantic tokens in globals.css.
• 🧩 CodeHike Integration (breaking change): Extracted CodeHike color definitions into a dedicated code-hike.css file and replaced all hardcoded hex/rgba values with Tailwind’s theme() references.
• 🧱 Semantic Token Architecture: Implemented computed semantic tokens derived from primitives, enabling consistent theming and future customization.
• 🌈 Decorative Token System: Added decorative tokens for hero gradients and rainbow banners to replace previously hardcoded values.
• 💧 Alpha Channel Support: Introduced proper alpha channel management for transparent and layered colors.
• ⚙️ Tailwind v4 Compatibility: Updated all color references to align with Tailwind CSS v4’s token-based theming model using theme().

Motivation

• Maintainability: Centralize all color definitions to simplify theme switching and color customization.
• Breaking Change: The color system has been completely refactored to align with modern design token standards.
• Consistency: Ensure consistent color usage across all components and eliminate direct color values.
• Future-proofing: Lay the foundation for supporting custom themes and dynamic color switching in future updates.

Breaking Changes

• Color Token Structure
  → All hardcoded colors have been replaced with semantic token references.
  Consumers must now use var(--color-*) variables (e.g., var(--color-primary), var(--color-background)) instead of static color values.

• CodeHike Colors
  → CodeHike color values now rely on Tailwind’s theme() function rather than hardcoded hex codes.

• File Structure
  → Color definitions are now split across three layers for maintainability:
  token.css (primitive colors), code-hike.css (syntax highlighting), and globals.css (semantic & decorative tokens).