---
name: Rider Operations System
colors:
  surface: '#fff8f7'
  surface-dim: '#f1d3d1'
  surface-bright: '#fff8f7'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#fff0ef'
  surface-container: '#ffe9e7'
  surface-container-high: '#ffe1df'
  surface-container-highest: '#fadbd9'
  on-surface: '#281716'
  on-surface-variant: '#5c403e'
  inverse-surface: '#3e2c2b'
  inverse-on-surface: '#ffedeb'
  outline: '#906f6d'
  outline-variant: '#e5bdbb'
  surface-tint: '#bd0e25'
  primary: '#960019'
  on-primary: '#ffffff'
  primary-container: '#c01227'
  on-primary-container: '#ffd1ce'
  inverse-primary: '#ffb3af'
  secondary: '#5f5e5e'
  on-secondary: '#ffffff'
  secondary-container: '#e2dfde'
  on-secondary-container: '#636262'
  tertiary: '#004e6f'
  on-tertiary: '#ffffff'
  tertiary-container: '#006791'
  on-tertiary-container: '#b8e1ff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#ffdad7'
  primary-fixed-dim: '#ffb3af'
  on-primary-fixed: '#410005'
  on-primary-fixed-variant: '#930018'
  secondary-fixed: '#e5e2e1'
  secondary-fixed-dim: '#c8c6c5'
  on-secondary-fixed: '#1c1b1b'
  on-secondary-fixed-variant: '#474746'
  tertiary-fixed: '#c7e7ff'
  tertiary-fixed-dim: '#86cffe'
  on-tertiary-fixed: '#001e2e'
  on-tertiary-fixed-variant: '#004c6c'
  background: '#fff8f7'
  on-background: '#281716'
  surface-variant: '#fadbd9'
typography:
  display-lg:
    fontFamily: Public Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Public Sans
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 32px
  headline-sm:
    fontFamily: Public Sans
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
  body-lg:
    fontFamily: Public Sans
    fontSize: 18px
    fontWeight: '500'
    lineHeight: 26px
  body-md:
    fontFamily: Public Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-bold:
    fontFamily: Public Sans
    fontSize: 14px
    fontWeight: '700'
    lineHeight: 20px
  label-sm:
    fontFamily: Public Sans
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  touch-min: 48px
  touch-lg: 56px
  margin-mobile: 16px
  gutter: 12px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 24px
---

## Brand & Style
The design system for the Rider/Agent application shifts from the consumer-facing "discovery" experience to a high-utility "execution" environment. The brand personality is functional, clear, and urgent, designed for users who are often in motion, outdoors, and multitasking.

The design style is **Corporate / Modern** with a heavy emphasis on **High-Contrast** elements to ensure legibility under direct sunlight. We maintain brand continuity through the signature red primary color and specific rounding constants, but the interface prioritizes information density and clear calls-to-action over decorative whitespace. The emotional response should be one of confidence, reliability, and efficiency.

## Colors
The palette is engineered for maximum outdoor readability. 
- **Primary Red (#c01227):** Reserved for critical actions, branding, and primary buttons.
- **Secondary Dark (#1a1a1a):** Used for primary text and high-contrast UI shells to ensure the "urgent" tone.
- **Status Colors:** Explicitly mapped to operational states:
    - **Success Green:** Completion of Pick up or successful check-ins.
    - **Warning Amber:** Delays, expiration of tasks, or inventory issues.
    - **Info Blue:** Navigation prompts, route updates, and general system notifications.
- **Backgrounds:** A clean, high-brightness neutral palette to provide a stark contrast against the dark text and vibrant status colors.

## Typography
This design system utilizes **Public Sans** across all levels to maintain its institutional and trustworthy character. Typography is optimized for glanceability:
- **Weight over Scale:** We use semi-bold and bold weights for critical data points (Booking numbers, street names) rather than just increasing size.
- **Touch-Friendly Heights:** Line heights are slightly more generous than standard web defaults to ensure that text-based interactive elements have a sufficient vertical hit area.
- **Mobile Priority:** Large display styles are used sparingly, primarily for "Current Task" headers.

## Layout & Spacing
The layout follows a **Fluid Grid** model with a strict 4px baseline rhythm.
- **Touch Targets:** A minimum height of 48px is enforced for all interactive elements, with 56px used for primary action buttons to accommodate gloved hands or rapid movement.
- **Safe Zones:** A 16px horizontal margin is standard on mobile. Content cards use 12px internal padding to maximize information density while maintaining legibility.
- **Vertical Stacking:** Information is organized in a "stack" layout (Top-to-Bottom) to simplify the decision-making process for the rider.

## Elevation & Depth
To maintain brand consistency while ensuring utility, the design system employs **Ambient Shadows**:
- **Soft Shadows:** Shadows use a low-opacity (#000000 at 8-10%) with a wide blur (12px to 16px) and a slight Y-offset. This creates a subtle lift for cards without cluttering the UI.
- **Active States:** Buttons and cards use a deeper, more condensed shadow when pressed to provide tactile feedback.
- **Contrast Borders:** In high-glare environments, shadows are reinforced with a 1px low-contrast border (#E0E0E0) to ensure the container boundaries are visible.

## Shapes
The shape language is defined by a consistent **14px (0.875rem) corner radius** for all primary containers and buttons.
- **Standard Corners:** 14px for cards, primary buttons, and input fields.
- **Small Elements:** 8px for inner nested elements or secondary tags.
- **Pill Shapes:** Used exclusively for status badges (e.g., "Active", "On Time") to distinguish them from actionable buttons.

## Components
- **Primary Action Buttons:** 56px height, Solid Red (#c01227) with White text. Bold weight. Rounded to 14px.
- **Operational Cards:** White background with a subtle shadow and 1px border. Used for individual Booking details. Headers within cards should use the "Label-Bold" style in Red or Dark Grey.
- **Status Chips:** High-saturation background (Success Green, Warning Amber, Info Blue) with white or high-contrast dark text. Pill-shaped.
- **Lists:** High-density rows with 56px minimum height. Use chevron icons to indicate drill-down actions.
- **Input Fields:** 14px rounding, 56px height. Labels are persistent above the field in "Label-SM" style for clarity during data entry.
- **Progress Indicators:** Linear bars at the top of the screen or within task cards to show "Steps Remaining" in a pickup flow.
- **Floating Action Buttons (FAB):** Used sparingly for "Center on Map" or "Emergency Contact" to ensure they don't block critical pickup data.