Angular Global Styles & Design System

This skill enforces the structure of the src/styles.css file and the rules for using the design system in the application.

1. Strict Usage Rules

1. Exclusively Use CSS Variables: In HTML templates and component CSS, NEVER hardcode hex colors or fonts. ALWAYS use the Tailwind utility classes mapped to the variables defined below (e.g., bg-primary, text-text, font-inter-regular).
2. No Exceptions: All colors and fonts must come from this central configuration to ensure consistency and Dark Mode support.
3. Structure: The styles.css file must strictly follow the order: Tailwind Setup -> Fonts -> Variables -> Theme Configuration -> Utilities -> Animations -> Global Reset.

2. Standard styles.css Configuration

File: src/styles.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));