# AI Design System Guidelines - PraFrota

This document outlines the design implementation rules for the PraFrota application. All AI agents must adhere to these guidelines when generating or modifying UI components.

## 1. Typography
**Primary Font:** `Roboto` (Google Fonts)
- **Weights:** 300 (Light), 400 (Regular), 500 (Medium/Bold)
- **Base Size:** 14px (0.875rem)
- **Line Height:** 1.4

### Usage
- **Headings (H1-H3):** Roboto 500. Dark gray (`#1A1A1A` or `rgba(0,0,0,0.87)`).
- **Body Text:** Roboto 400. Gray (`#333333` or `rgba(0,0,0,0.87)`).
- **Secondary Text/Captions:** Roboto 400. Light Gray (`#666666` or `rgba(0,0,0,0.6)`).

## 2. Color Palette

### Primary System
- **Primary:** `#f1b40d` (Amber/Gold)
- **Primary Variant (Hover):** `#e0a80b` (Darker Amber) or `#f1b40d9a` (Transparent)
- **Primary Text (On Light):** `#000000` (often used with amber background for high contrast)
- **Primary Light/Background:** `#FFF8E1` (Very light amber for active states)

### Neutral System
- **Background (App):** `#f8f9fa` (Light Gray/White smoke)
- **Surface (Cards/Sidebars):** `#ffffff` (White)
- **Dividers/Borders:** `rgba(0, 0, 0, 0.12)` or `#e0e0e0`

### Semantic Colors
- **Success:** `#4CAF50` (Green) - used in badges/toasts
- **Warning:** `#FF9800` (Orange) - used in alerts
- **Error:** `#F44336` (Red) - used in form errors
- **Info:** `#2196F3` (Blue) - used in status badges

## 3. UI Components & Tokens

### Buttons
- **Primary Button:**
  - Background: `#f1b40d` (or custom dark `#353433c6` in some contexts)
  - Text: White or Dark (depending on contrast)
  - Radius: `4px`
  - Padding: `0.375rem 0.75rem`
- **Secondary/Outline Button:**
  - Background: Transparent
  - Border: `1px solid rgba(0,0,0,0.12)`
  - Text: Dark Gray

### Cards (`.card`)
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.12)`
- Radius: `8px`
- Shadow: `0 2px 8px rgba(0, 0, 0, 0.1)`
- Padding: `1.5rem`

### Complex Cards (Vehicle/Info Pattern)
Based on `.vehicle-popup` styles, use this structure for rich content cards:
- **Header:** `#f8f9fa` background, contains Title and Status Badge.
- **Body:** White background, padding `15px`.
- **Metrics Strip:** Gray container `#f8f9fa` with rounded corners inside the body.
- **Footer:** Driver/User info with avatar.

### Tables (`.data-table`)
- **Container:** Rounded corners `8px`, `overflow: hidden`.
- **Header (`th`):** Background `#f8f9fa` (Surface Variant). Font weight `500`.
- **Rows (`tr`):** White background. Border bottom `1px solid rgba(0,0,0,0.12)`.
- **Hover:** Rows highlight with `rgba(0, 0, 0, 0.02)` or specific hover color.
- **Cell Padding:** `0.75rem` (12px).

### Inputs
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.12)`
- Radius: `4px`
- Padding: `0.75rem`
- Focus Ring: `2px solid rgba(241, 196, 15, 0.2)` components

## 4. Layout Dimensions
- **Sidebar (Expanded):** `240px`
- **Sidebar (Collapsed):** `80px`
- **Header Height:** `68px`
- **Content Padding:** `1rem` (16px) or `1.5rem` (24px) for cards

## 5. Angular Material (Version 19)
- Use standard Material components (`<mat-form-field>`, `<mat-card>`, `<mat-table>`) but perform style overrides in `styles.scss` or component CSS to match the **Amber/Gold** theme, as standard Material themes ("Indigo/Pink") do not match our identity.
- **Icon Set:** use `mat-icon` with Google Material Icons font.

## 6. Dark Mode Strategy
- Class: `.dark-theme` on body.
- **Background:** `#121212` or `#212020`
- **Surface:** `#1e1e1e`
- **Text:** White (`rgba(255,255,255,0.87)`)
- **Primary:** Adjusted to `#FFD700` (lighter Gold for better dark contrast)