# Design tokens (`tokens.md`)

Structured values originate from `resources/design-system/tokens.php` (mirror of audited Blade/Tailwind config). Numbers below reflect **`layouts/app.blade.php`** (marketing) unless labeled *Dashboard*.

## Brand color

| Token | HEX | Usage |
| --- | --- | --- |
| `criazo.500` / `criazo-primary` | `#00b7b2` | Primary actions, eyebrow accents |
| `criazo-hover` | `#00a09c` | Hover states |
| Semantic `success` | `#30d158` | Positive affordances/system feedback |

Complete ramp: `--` see `tokens.php['colors_criazo_scale']`.

## Neutral grayscale

Marketing uses `neutral.50 … neutral.900` defined in CDN extend (`#fafafa` … `#000000`). Dashboard shells lean on `#f5f5f7` backgrounds matching `neutral-100`.

## Typography

### Marketing (`layouts/app`)

System stack: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif`.

Custom `fontSize.hero`:

```
clamp(3rem, 8vw, 5.5rem); line-height: 1.05; weight 700
```

`fontSize.subhero`:

```
clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.4; weight 600
```

Mobile tweak (`max-width 767px`) forces tighter `.text-hero`.

### Dashboard (`dashboard/leads/index.blade.php`)

Inter stack imported from Google Fonts; sizes commonly `13–17px` for UI labels, bigger numeric KPI typography `~28px`.

## Containers

| Surface | Typical class |
| --- | --- |
| Homepage widest grid | `max-w-[1400px]` |
| Marketing inner shells | `max-w-[1300px]` |
| Long-form readability | `max-w-[900px]` |
| Dashboard | `max-w-6xl` |

## Shadows

- Marketing: Tailwind defaults `shadow-lg`, `shadow-xl`.
- Dashboard custom `shadow-criazo` / `shadow-criazo-hover` literals defined inline in Blade config.

## Motion

| Name | Timing | Source |
| --- | --- | --- |
| `smooth-transition` | `all 0.4s cubic-bezier(0.4,0,0.2,1)` | layouts/app |
| Dashboard card hover | translateY(-4px) + shadow swap | `.card-hover` |
| Scroll reveal `.reveal` | `opacity/transform 0.8s ease-out` | layouts/app |
| Sticky CTA | `transition-transform duration-300 ease-out` | sticky partial script |

Reduced-motion overrides exist globally—mirror when adding animations.

## z-index hotspots

| Layer | Z | Notes |
| --- | --- | --- |
| Site header sticky wrapper | 50 | reserves flow space |
| Sticky mobile CTA | 40 | above content, below modals needing focus trap |
| Dashboard header | 40 | matches leads UI |
| Modals/overlays | 50+ | e.g., status modal on leads |

Consult [`animations.md`](animations.md) & [`layout.md`](layout.md) for complementary detail.