# apps/web/src/styles
dir: apps/web/src/styles

index: apps/web/src/styles/.pi-map.index.md

## role
Centralizes the visual design system and styling infrastructure for the web application, providing theme-aware CSS tokens, global styles, component patterns, and utility classes used across the frontend.
## files
- global.css | Global CSS stylesheet defining the visual design system, layout structure, and component styles for a web application shell with responsive navigation, cards, forms, dialogs, and settings pages.
- syntax-highlight.css | Stylesheet providing CSS for a syntax highlighting component with line numbers, toolbar, and Prism.js token color integration. | dep: CSS custom properties (var(--panel), var(--border), var(--bg), var(--muted), var(--ink), var(--brand)), Prism.js (for token classes)
- tokens.css | Defines a comprehensive CSS design system with custom properties for colors, spacing, typography, shadows, and layout tokens supporting both light and dark themes.
- utilities.css | Provides a comprehensive CSS utility framework with responsive layout, typography, spacing, and component-specific styles for a web application including terminal, session management, and form interfaces. | dep: CSS custom properties (variables), xterm.js (terminal integration), webkit-box (multiline truncation)
## arch
CSS custom property (variable) driven design system with theme switching (light/dark), utility-first CSS patterns, modular separation of concerns (tokens/globals/components/utilities), and responsive design with mobile-first breakpoints.
## tags
var(, css, global, layout, component, syntax, tokens, stylesheet
## symbols
-
## workflows
-
## dirty
-