# [Project Name] — Style Reference

Source: https://example.com
Extracted: YYYY-MM-DD

---

## Typography

### Font Families
- **Primary:** Inter (weights: 400, 500, 600)
- **Monospace:** Source Code Pro (weights: 400, 600)

### Font Files (Local)
- `FONTS/Inter-Regular.woff2`
- `FONTS/Inter-Medium.woff2`
- `FONTS/Inter-SemiBold.woff2`

### CSS Font Import
```css
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  src: url('./FONTS/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 500;
  src: url('./FONTS/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  src: url('./FONTS/Inter-SemiBold.woff2') format('woff2');
}
```

### Type Scale
| Element | Size | Weight | Line Height | Color |
|---------|------|--------|-------------|-------|
| h1 | 40px | 600 | 56px | #222222 |
| h2 | 30px | 600 | 46px | #222222 |
| h3 | 22px | 600 | 30px | #222222 |
| h4 | 18px | 600 | 26px | #222222 |
| body | 16px | 400 | 1.6 | #868686 |
| small | 14px | 400 | 16px | #666666 |

---

## Colors

### Color Tokens
| Token | Value | Usage |
|-------|-------|-------|
| --neutral-100 | #FFFFFF | Backgrounds, cards |
| --neutral-200 | #F9F9F9 | Page background |
| --neutral-300 | #EFEFEF | Badges, secondary buttons |
| --neutral-400 | #E7E7E7 | Borders, dividers |
| --neutral-500 | #C5C5C5 | Disabled states |
| --neutral-600 | #868686 | Body text |
| --neutral-700 | #666666 | Secondary text |
| --neutral-800 | #222222 | Headings, primary buttons |
| --accent-primary | #4A3AFF | Links, accents |

### CSS Variables
```css
:root {
  --neutral-100: #FFFFFF;
  --neutral-200: #F9F9F9;
  --neutral-300: #EFEFEF;
  --neutral-400: #E7E7E7;
  --neutral-500: #C5C5C5;
  --neutral-600: #868686;
  --neutral-700: #666666;
  --neutral-800: #222222;
  --accent-primary: #4A3AFF;
}
```

---

## Spacing

### Spacing Scale
| Token | Value | Common Usage |
|-------|-------|--------------|
| xs | 8px | Tight gaps, icon margins |
| sm | 12px | Badge padding |
| md | 16px | Default gaps |
| lg | 24px | Section padding |
| xl | 32px | Card padding |
| 2xl | 48px | Large sections |
| 3xl | 80px | Section margins |

---

## Border Radius

| Element | Radius |
|---------|--------|
| Cards | 24px |
| Buttons (pill) | 80px |
| Badges | 80px |
| Images | 22px |
| Small elements | 16px |
| Avatars | 50% |

---

## Shadows

| Name | Value | Usage |
|------|-------|-------|
| shadow-sm | 0 2px 6px rgba(20, 20, 43, 0.08) | Card hover |
| shadow-md | 0 4px 12px rgba(20, 20, 43, 0.12) | Dropdowns |

---

## Components

### Buttons

**Primary Button**
```css
.btn-primary {
  background-color: #222222;
  color: #FFFFFF;
  border-radius: 80px;
  padding: 18px 26px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-primary:hover {
  background-color: #666666;
}
```

**Secondary Button**
```css
.btn-secondary {
  background-color: #EFEFEF;
  color: #222222;
  border: 1px solid #E7E7E7;
  border-radius: 80px;
  padding: 18px 26px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-secondary:hover {
  background-color: #222222;
  border-color: #222222;
  color: #FFFFFF;
}
```

### Cards
```css
.card {
  background-color: #FFFFFF;
  border: 1px solid #E7E7E7;
  border-radius: 24px;
  padding: 32px;
  transition: all 0.3s;
}
.card:hover {
  box-shadow: 0 2px 6px rgba(20, 20, 43, 0.08);
}
```

### Badges
```css
.badge {
  background-color: #EFEFEF;
  color: #222222;
  border-radius: 80px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
```

### Dividers
```css
.divider {
  height: 1px;
  background-color: #E7E7E7;
  margin: 32px 0;
}
```

---

## Layout

### Container
```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
```

### Grid
```css
.grid-2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

@media (max-width: 991px) {
  .grid-2-columns {
    grid-template-columns: 1fr;
  }
}
```

### Section Spacing
```css
.section {
  padding: 80px 0;
}

@media (max-width: 767px) {
  .section {
    padding: 56px 0;
  }
}
```

### Breakpoints
| Name | Value |
|------|-------|
| mobile | max-width: 479px |
| tablet | max-width: 767px |
| laptop | max-width: 991px |
| desktop | min-width: 992px |
| large | min-width: 1440px |

---

## Transitions

- Default duration: 0.3s
- Default easing: ease (or linear for simple states)
- Properties: `all`, `color`, `background-color`, `transform`, `opacity`

```css
transition: all 0.3s;
transition: color 0.3s;
transition: background-color 0.3s, transform 0.3s;
```

---

## Base Styles

```css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #868686;
  background-color: #F9F9F9;
  min-height: 100%;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
```
