# App Design Guidelines

Based on the codebase analysis, here are the key design patterns and colors used across the application:

## Color Palette

**Primary Green**: `#008060` (shopify green, primary actions, buttons)
**Dark Green**: `#004c3f` (hover states, darker variations)
**Light Green**: `#e3f5ef` (background accents)

**Text Colors**:
- Primary: `#0f172a` (dark text)
- Secondary: `#6b7280` (muted text)
- Success: `#10B981` or `#059669`
- Error: `#EF4444` or `#b91c1c`

**Background Colors**:
- Primary: `#ffffff` (white)
- Secondary: `#f8fafc` (light gray)
- Input focus border: `#008060`

**Border Colors**:
- Primary: `#e5e7eb`
- Secondary: `#d1d5db`

## Typography

**Font Families**:
- Primary: `'Inter', system-ui, -apple-system, sans-serif`
- Accent: `'Space Grotesk'` (used in topup.html)

**Font Sizes**:
- Body: `14px`
- Button: `14px`
- Small text: `12px`, `13px`
- Titles: `18px`, `24px`, `28px`

## Border Radius

- Cards: `12px`
- Buttons: `8px`
- Small elements: `6px`
- Pills/Badges: `999px` (fully rounded)

## Shadow & Elevation

**Box Shadows**:
- Card: `0 1px 3px rgba(0, 0, 0, 0.05)`
- Modal: `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)`
- Primary button hover: `0 6px 16px rgba(0, 128, 96, 0.25)`

**Backdrops**:
- Modal overlay: `rgba(15, 23, 42, 0.7)` with `backdrop-filter: blur(8px)`
- Glass effect: `backdrop-filter: blur(12px)`

## Button Styles

**Primary Button**:
- Background: `--green` (`#008060`)
- Color: White
- Hover: `--green-dark` (`#004c3f`)
- Shadow: `0 4px 12px rgba(0, 128, 96, 0.15)`

**Secondary Button**:
- Background: White
- Border: `--border` (`#e5e7eb`)
- Hover: `#f8fafc`

## Card & Panel Styles

**Cards**:
- Background: White
- Border: `1px solid var(--border)`
- Border-radius: `12px`
- Padding: `24px`
- Shadow: `0 1px 3px rgba(0, 0, 0, 0.05)`
- Footer border: `1px solid var(--border)` with `margin-top: 20px`

## Input Styles

**Text Input & Select**:
- Border: `1px solid var(--border)` (`#e5e7eb`)
- Border-radius: `8px`
- Padding: `10px 14px`
- Font-size: `14px`
- Focus: Border color becomes `--green` (`#008060`)
- Focus box-shadow: `0 0 0 3px rgba(0, 128, 96, 0.1)`

## Modal Styles

**Overlay**: 
- Background: `rgba(15, 23, 42, 0.7)` with `backdrop-filter: blur(8px)`
- Z-index: `100000`

**Modal Container**:
- Background: `#fff`
- Border-radius: `16px`
- Max-width: `500px`
- Padding: `24px`
- Shadow: `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)`

## Spacing & Layout

- Card gap (grid): `24px`
- Button gap: `12px` or `8px`
- Field gap: `8px`
- Card padding: `24px`
- Shell/container padding: `32px 20px 48px`

## Application Pages

The inline checkout theming should align with these app design principles across:
1. **select-plan.html** - Plan selection with inline checkout
2. **settings.html** - Account settings with subscription management
3. **topup.html** - Token top-up purchases

All implementations use consistent styling including:
- Same green color scheme (`#008060`)
- Inter font family
- 8px border radius for consistency
- Consistent spacing and shadows
- Glass morphism effects with backdrop filters