headquarter/apps/web/src/styles/.pi-map.md

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