Theme Integration (CSS)

All UI components MUST use the project's CSS custom properties for colors. Never hardcode color values.

Rules

Backgrounds: Use var(--ctp-base), var(--ctp-mantle), var(--ctp-crust), var(--ctp-surface0), var(--ctp-surface1), var(--ctp-surface2).
Text: Use var(--ctp-text), var(--ctp-subtext0), var(--ctp-subtext1).
Muted/overlay text: Use var(--ctp-overlay0), var(--ctp-overlay1), var(--ctp-overlay2).
Accents: Use var(--ctp-blue), var(--ctp-green), var(--ctp-mauve), var(--ctp-peach), var(--ctp-pink), var(--ctp-red), var(--ctp-yellow), var(--ctp-teal), var(--ctp-sapphire), var(--ctp-lavender), var(--ctp-flamingo), var(--ctp-rosewater), var(--ctp-maroon), var(--ctp-sky).
Per-project accent: Use var(--accent) which is set per ProjectBox slot.
Borders: Use var(--ctp-surface0) or var(--ctp-surface1).
Never use raw hex/rgb/hsl color values in component CSS. All colors must go through --ctp-* variables.
Hover states: typically lighten by stepping up one surface level (e.g., surface0 -> surface1) or change text from subtext0 to text.
Active/selected states: use var(--accent) or a specific accent color with var(--ctp-base) background distinction.
Disabled states: reduce opacity (0.4-0.5) rather than introducing gray colors.
Use color-mix() for semi-transparent overlays: color-mix(in srgb, var(--ctp-blue) 10%, transparent).