# Antigravity Skill: Kevron Apartments Brand Guardian

## Purpose
Enforce strict compliance with Kevron Suites and Apartments luxury branding rules, layout structures, visual parameters, spacing, font limits, and interactive styles.

## Design Rules & Token Enforcement

### 1. Typography
* **Luxury Headings**: `Marcellus`, Georgia, serif (Imported from Google Fonts).
* **Body / UI Text**: `Inter`, Arial, sans-serif.
* **Navigation Links**: `Inter Medium`.
* **Buttons**: `Inter SemiBold`.
* **Pricing & Booking Elements**: `Inter Bold`.
* **CRITICAL**: Do NOT use Playfair Display.

### 2. Font Size Hard Caps
* **H1**: Capped at `1.8rem` (maximum size).
* **H2 to H6**: Capped lower than `1.625rem`.
* **Body, Subheads & UI Text**: Capped at `0.875rem` (maximum size).
* Always apply `clamp()` rules with strict upper bounds. Example:
  ```css
  h1 {
    font-size: clamp(1.45rem, 3vw, 1.8rem);
  }
  h2 {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  }
  body {
    font-size: clamp(0.8125rem, 1vw, 0.875rem);
  }
  ```

### 3. Contrast & Palette
* **Primary Brand Colour**: `#2B3192` (Kevron Royal Blue)
* **Secondary Accent**: `#1FADEA` (Kevron Sky Cyan)
* **Luxury Accent**: `#D6A84F` (Champagne Gold)
* **Dark Background**: `#080D2B` (Midnight Navy)
* **Light Background**: `#F4F8FF` (Soft Ice Blue)
* **Clean Background**: `#FFFFFF` (Cloud White)
* **Main Text**: `#172033` (Charcoal Navy)
* **Main Light Text**: `#4b5563` (Tailwind Grey)
* **Muted Text**: `#64748B` (Slate Grey)
* **Border Colour**: `#DDE6F3` (Mist Blue Grey)
* **Success / Warning / Error**: `#16A34A` / `#F59E0B` / `#DC2626`

### 4. Interactive Components & Border Radius
* **Buttons**: Border radius MUST be `50px` (perfect pill shape).
  * Minimum 44px touch targets on mobile.
  * GPU-safe subtle hover zoom / hover shift animations.
* **Cards & Content Sections**: Border radius MUST be `0.1rem` (sharp, modern luxury look).
  * Box shadow: `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`.
  * Background colors must transitions to deeper colors on hover.
  * Sections must use alternating backgrounds (White / Soft Ice Blue / Gradient / Midnight Navy).

### 5. Scrollbar Styling
* Stylized scrollbars using:
  * Track: Soft Ice Blue (`#F4F8FF`) or Midnight Navy (`#080D2B`).
  * Thumb: Kevron Royal Blue (`#2B3192`) with a Sky Cyan (`#1FADEA`) hover effect.

### 6. PWA & Responsive
* Mobile-first responsive grids.
* Dynamic blur & shadow on scrolled navigation bar.
* Navigation auto-hides on scroll-down, shows on scroll-up.