.bg-brand-accent i {
  color: #ffffff;
}
colors:
  surface: '#fcf9f8'
  surface-dim: '#dcd9d9'
  surface-bright: '#fcf9f8'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f3f2'
  surface-container: '#f0eded'
  surface-container-high: '#eae7e7'
  surface-container-highest: '#e5e2e1'
  on-surface: '#1c1b1b'
  on-surface-variant: '#43474e'
  inverse-surface: '#313030'
  inverse-on-surface: '#f3f0ef'
  outline: '#74777f'
  outline-variant: '#c4c6cf'
  surface-tint: '#476083'
  primary: '#000613'
  on-primary: '#ffffff'
  primary-container: '#001f3f'
  on-primary-container: '#6f88ad'
  inverse-primary: '#afc8f0'
  secondary: '#7c5800'
  on-secondary: '#ffffff'
  secondary-container: '#ffbe39'
  on-secondary-container: '#6f4e00'
  tertiary: '#030608'
  on-tertiary: '#ffffff'
  tertiary-container: '#1a1f22'
  on-tertiary-container: '#82878a'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#d4e3ff'
  primary-fixed-dim: '#afc8f0'
  on-primary-fixed: '#001c3a'
  on-primary-fixed-variant: '#2f486a'
  secondary-fixed: '#ffdea8'
  secondary-fixed-dim: '#fcbb36'
  on-secondary-fixed: '#271900'
  on-secondary-fixed-variant: '#5e4200'
  tertiary-fixed: '#dfe3e7'
  tertiary-fixed-dim: '#c3c7cb'
  on-tertiary-fixed: '#171c1f'
  on-tertiary-fixed-variant: '#43474b'
  background: '#fcf9f8'
  on-background: '#1c1b1b'
  surface-variant: '#e5e2e1'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: '800'
    lineHeight: 56px
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '800'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 32px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-sm:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 8px
  container-max: 1280px
  gutter: 24px
  margin-mobile: 16px
  stack-sm: 12px
  stack-md: 24px
  stack-lg: 48px
---

## Brand & Style

The design system is engineered to project absolute reliability, technical mastery, and professional efficiency. Targeting homeowners and commercial kitchen managers, the UI must feel like a high-performance tool: dependable, organized, and clear.

The aesthetic follows a **Corporate / Modern** style with a focus on high-fidelity precision. It utilizes a structured grid, generous whitespace to reduce cognitive load during stressful repair situations, and subtle industrial cues that nod to hardware and machinery. The emotional response is one of immediate relief and confidence—the "expert is here" feeling.

## Colors

The palette is anchored by a deep **Navy Blue**, symbolizing authority and trust. This is the primary color for navigation, headings, and high-level containers. **Safety Yellow** serves as the high-visibility accent, used sparingly for primary actions (CTAs) and status indicators, mimicking the visual language of professional tools and cautionary industrial design.

- **Primary (#001f3f):** Deep Navy. Used for core branding, dark-mode surfaces, and primary text contrast.
- **Secondary (#1d10a7):** Impact Yellow. Used exclusively for "Book Now" buttons, urgent alerts, and highlights.
- **Tertiary (#e0e4e8):** Cool Slate. Used for borders, disabled states, and subtle background partitions.
- **Neutral (#1a1a1a):** Carbon Black. Used for body copy and iconography to ensure maximum legibility.

## Typography

This design system utilizes **Inter** for all primary communication. Its neutral, systematic nature ensures that information is conveyed without unnecessary flair. High-weight headings (Bold/ExtraBold) provide a strong hierarchy, essential for scanning services quickly.

**JetBrains Mono** is introduced as a secondary label font for technical specifications, model numbers, and service codes. This monospaced touch reinforces the "technical repair" and "engineering" aspect of the brand. Use tight letter-spacing for large displays to maintain a compact, high-impact look.

## Layout & Spacing

The layout is built on a **12-column fluid grid** for desktop and a **4-column grid** for mobile. We utilize an 8px base unit to ensure all components align to a predictable rhythm. 

- **Desktop:** 1280px max-width container with 24px gutters. Elements should snap to column boundaries to maintain a "blueprint" feel.
- **Mobile:** Full-width fluid layout with 16px side margins. 
- **Vertical Spacing:** Use `stack-lg` to separate major sections (e.g., Hero from Services). Use `stack-md` for internal component spacing (e.g., Headline to Body text).

## Elevation & Depth

Visual hierarchy is achieved through **Tonal Layers** and **Low-contrast outlines**. This design system avoids heavy shadows to maintain a clean, "sanitary" feel appropriate for kitchen environments.

- **Surface 0 (Base):** Pure white (#FFFFFF) for the main background.
- **Surface 1 (Container):** Subtle Cool Slate (#F8FAFC) used for cards and service sections to differentiate from the background.
- **Borders:** Use 1px solid borders (#E0E4E8) for all input fields and cards.
- **Interactive Depth:** When a user hovers over a service card, apply a very soft, diffused ambient shadow (0px 4px 20px rgba(0, 31, 63, 0.08)) to indicate interactivity without breaking the flat, professional aesthetic.

## Shapes

The shape language is **Soft (Level 1)**. Elements feature a 0.25rem (4px) corner radius. This slight rounding takes the edge off the industrial feel, making the service feel approachable and modern while maintaining a sturdy, architectural structure. 

- **Buttons & Inputs:** 4px radius.
- **Service Cards:** 8px (rounded-lg) to distinguish them as larger content containers.
- **Icon Enclosures:** 4px radius or perfect circles for status indicators.

## Components

### Buttons
- **Primary:** Background #1d10a7, Text #001f3f (Bold). Used for "Book Repair" or "Call Now."
- **Secondary:** Background #001f3f, Text #FFFFFF. Used for secondary navigation or "View Services."
- **Outline:** Transparent background, 1px border #001f3f, Text #001f3f. Used for tertiary actions.

### Input Fields
Inputs should feel robust. 1px border (#E0E4E8) with a 4px radius. On focus, the border shifts to #001f3f with a 2px thickness. Labels use `label-sm` (monospaced) for a technical feel.

### Service Cards
White background, 1px border (#E0E4E8). Header icons should be Navy Blue. Use `headline-md` for the title and `body-md` for the description. 

### Status Chips
For repair tracking (e.g., "In Progress," "Fixed"). 
- **Fixed:** Green background (low opacity), Green text.
- **Scheduled:** Yellow background (low opacity), Dark Blue text.

### Additional Components
- **Trust Bar:** A horizontal strip below the hero displaying logos of appliance brands (Bosch, Samsung, Viking) in grayscale for a professional, non-cluttered look.
- **Price Calculator:** A modular card component with a "Step Indicator" at the top to simplify the quote process.

a.bg-brand-accent.text-white.font-bold.px-4.py-2.rounded.hover\:bg-brand-accentDark.transition.flex.items-center.justify-center.w-full.mt-4 {
    background-color: #1d10a7;
}