# Franciscan Society - Design System

## Color Palette
- **Divine Gold:** `#C5A963` (`--color-divine-gold`)
- **Warm Parchment:** `#F4F1EA` (`--color-warm-parchment`)
- **Vatican Black (Charcoal):** `#1A1A1A` (`--color-vatican-black`)
- **Antique Gold:** `#9B804E` (`--color-antique-gold`)
- **Soft Ivory:** `#FAF9F6` (`--color-soft-ivory`)

## Typography Scale (Fluid)
- **H1 (Hero):** clamp(3rem, 8vw, 8rem) | Cormorant Garamond | 300 | Line-height: 1.1
- **H2 (Section):** clamp(2rem, 5vw, 4rem) | Cormorant Garamond | 400 | Line-height: 1.2
- **H3 (Card/Block):** clamp(1.5rem, 3vw, 2.5rem) | Cormorant Garamond | 400
- **Body Large:** 1.25rem | Inter | 300 | Line-height: 1.6
- **Body Base:** 1rem | Inter | 300 | Line-height: 1.6
- **Caption:** 0.875rem | Inter | 400 | Letter-spacing: 0.05em

## Spacing Scale (8px System)
- `--spacing-2:` 8px
- `--spacing-4:` 16px
- `--spacing-8:` 32px
- `--spacing-12:` 48px
- `--spacing-16:` 64px
- `--spacing-24:` 96px
- `--spacing-32:` 128px (Section Padding)

## Grid System
- **Max Width:** 1440px
- **Columns:** 12 (Desktop), 8 (Tablet), 4 (Mobile)
- **Gutter:** 24px

## Elevation & Shadows
- **Shadow Level 1 (Hover):** `0 4px 20px rgba(26,26,26,0.05)`
- **Glassmorphism:** `backdrop-filter: blur(12px); background: rgba(244,241,234,0.7);`

## Image Treatment
- Soft borders, high contrast. Overlay with a 10% `#1A1A1A` gradient to ensure text legibility.