Time Tracker

Colors

Global tokens in src/app.css. Always reference by var name — no hard-coded hex except color-mix() tints derived from a token.

Background layers. Use --bg-color for the page base, --glass-bg for cards and panels, --glass-border for borders and dividers.

--text-primary for body/labels, --text-heading for headings (dimmer), --text-secondary for metadata and muted labels.

--accent-color for interactive elements (links, focus rings, active states). --accent-glow for ambient glow effects.

--success positive states; --danger destructive/errors only (not decorative); --warning-text/bg/border for warning blocks. Each pairs with a -glow sibling.

--popover-bg for popover/dropdown panels that float over the page (project select dropdown, native <select> styled panel). Darker than --bg-color to lift off the surface beneath.

--gradient-hero for h1 titles (gradient text). --gradient-cta / --gradient-cta-danger for Timer button fills. Roles are fixed — don't substitute.

Pink/purple gradient used by AI affordances (sparkle button, AI badges). No token — keep it distinct from --accent-color so AI surfaces are immediately recognisable.

Cycled in order when creating a new project. Defined in src/lib/projectColors.ts.

Typography

Utility classes in src/app.css — no scoped font props needed.