# AGENTS.md — Auton front-end rules

Read `DESIGN.md` first. These are the non-negotiables for any code an agent writes for Auton.

- Import `tokens.css` (or use `tailwind.preset.js`); never hard-code colours, radii or fonts. Support light and dark via the CSS variables.
- Font: `"Auton Round", Comfortaa, "Baloo Bhaijaan 2", system-ui, sans-serif` loaded from `fonts/AutonRound[wght].woff2` (300–700, `font-display: swap`). Use `font-variant-numeric: tabular-nums` for prices and tables (already the default in the font).
- Symbols: `<script src="symbols/auton-symbols.js" data-src="symbols/auton-symbols.json"></script>` + `symbols/auton-symbols.css`, then `<auton-symbol name="…">`. No Lucide, Heroicons, Font Awesome, Material or emoji.
- Logo: `<img src="logos/auton-logo-color.svg" alt="Auton">` (white version on dark). Never inline-redraw it.
- Buttons 6px radius, 44px tall, sentence case; one green primary per view. Cards 14px radius with 1px hairline. Bento tiles 34px. No pill buttons, no gradients on backgrounds.
- Motion: `motion/auton-motion.css` tokens and classes; easing `cubic-bezier(.2,0,0,1)`; press = scale(.98) 100ms; respect `prefers-reduced-motion`.
- RTL: set `lang="ar" dir="rtl"` for Arabic; use logical CSS properties (`margin-inline-start`, `padding-inline`, `inset-inline-start`); mirror directional symbols (arrows, chevrons).
- Accessibility: contrast ≥ 4.5:1, visible 3px blue focus ring, 44px targets, labels on every input, alt text, never colour alone for state.
- Copy: sentence case, plain verbs on buttons ("Book installation"), no exclamation marks, no invented numbers (use `[TBD]`).