# Eventixa frontend CSS architecture

Eventixa uses one shared frontend framework stylesheet:

- `assets/frontend/css/frontend-ui.css`

It contains the canonical design tokens, scoped base rules, typography, utilities, reusable components, accessibility rules, and RTL support. Shared variables and component rules must not be redeclared in page stylesheets.

Page styles remain in `assets/frontend/css/` and should contain only page-specific layout and feature rules. They are enqueued after `eventixa-frontend-ui` through `FrontendAssets::enqueue_route()`.

## Rules

1. Use the `--evx-*` variables defined in `frontend-ui.css`.
2. Do not create page-specific color, border, radius, shadow, typography, control-height, or spacing variables when an existing token represents the same concept.
3. Keep generic reusable classes prefixed with `evx-`.
4. Do not use unscoped global resets.
5. Keep JavaScript hooks, element IDs, and data attributes independent from visual utility classes.
6. Add shared components to `frontend-ui.css`; add only unique layout rules to page CSS.

## Canonical layers

1. Design tokens and semantic aliases.
2. Base rules scoped to Eventixa roots.
3. Layout primitives (`container`, `stack`, `cluster`, `grid`, `sidebar-layout`, `section`).
4. Single-purpose utilities.
5. Reusable components.
6. Responsive, accessibility, reduced-motion, and RTL rules.

The files under the former `assets/css/core/` chain are not runtime assets and
must not be referenced. `assets/frontend/css/frontend-ui.css` is the only
frontend framework entry point.

## Phase 9 cleanup rules

- `assets/frontend/css/frontend-ui.css` is the authoritative source for tokens, reset/base rules, utilities, and reusable components.
- Route CSS must contain only route-specific layout, states, and integration selectors.
- Route CSS must not redeclare global `box-sizing`, common palette values, or shared component primitives.
- Eventixa Pro Grid/Map views and Single Event Templates 2/3 should depend on the Core `eventixa-frontend-ui` handle and add only Pro-specific layout rules.
