Theming

Color System

Cmssy uses OKLCH color values defined as CSS variables. The theme is split into semantic tokens that adapt to light and dark modes:

• --background / --foreground — page background and text
• --primary / --primary-foreground — primary action buttons
• --muted / --muted-foreground — subtle backgrounds and helper text
• --card / --card-foreground — card surfaces
• --border — default border color
• --destructive — error and danger states

Customizing Colors

Edit the :root block in styles/main.css to change your color palette. Use OKLCH values for perceptual uniformity:

Dark Mode

Dark mode is controlled by the .dark class on the root element. Override the same variables in the .dark selector:

Tailwind CSS v4

The project uses Tailwind CSS v4 with CSS-first configuration. Key differences from v3:

• No tailwind.config.js — everything lives in CSS
• @theme inline maps CSS variables to Tailwind utilities
• @source directives tell Tailwind which files to scan for class names
• Gradient classes use bg-linear-to-r instead of bg-gradient-to-r
• Shadow scale shifted: shadow-sm in v4 = old bare shadow

Border Radius

Border radius uses a base --radius variable. All radius tokens are derived from it:

• rounded-sm = calc(var(--radius) - 4px)
• rounded-md = calc(var(--radius) - 2px)
• rounded-lg = var(--radius) (10px default)
• rounded-xl = calc(var(--radius) + 4px)