# design-tokens Specification

## Purpose
Centralize the public site's design tokens so the interface implements the Heritage Editorial system from DESIGN.md (EB Garamond, 8px rhythm, zero radius, 1120px container, paper/olive/sage/ink palette), honoring reduced motion and WCAG AA contrast without card-shadow hierarchy.
## Requirements
### Requirement: Design tokens are centralized for the public site

The system SHALL define design tokens in a single source consumed by the public site layout and components. Tokens MUST implement the Heritage Editorial system from `DESIGN.md`: typography family EB Garamond (self-hosted), font scale (display/headline/title/body/label), spacing on an 8px rhythm, border radius `0` for interactive and content surfaces, container max width `1120px`, paper/olive/sage/ink color roles, transition duration/easing, and MUST NOT rely on card shadows as a hierarchy mechanism for regular content.

#### Scenario: Public layout uses shared Heritage Editorial tokens

- **WHEN** a public page is rendered
- **THEN** visual properties MUST be derived from the centralized token definitions rather than arbitrary inline values
- **AND** the primary typeface MUST be EB Garamond (or the declared serif fallback stack)
- **AND** public content surfaces MUST use `0` border radius from tokens

#### Scenario: Palette commits paper and olive regions

- **WHEN** the public site is rendered
- **THEN** background regions MUST use paper ivory / paper deep / olive deep tokens rather than pure white card stacks on a white page
- **AND** primary interactive emphasis MUST use olive heritage (`#556B2F`) / olive deep (`#3E5219`) tokens

### Requirement: Public site respects reduced motion preference

The system SHALL honor `prefers-reduced-motion` by disabling or minimizing non-essential animations and transitions on the public site, including image hover scales and menu transitions.

#### Scenario: User prefers reduced motion

- **WHEN** a visitor has `prefers-reduced-motion: reduce` enabled
- **THEN** the public site MUST NOT play non-essential motion effects

### Requirement: Public site meets baseline accessibility contrast

The system SHALL use Heritage Editorial color combinations that meet WCAG AA contrast requirements for text and interactive elements. Long-form text MUST use ink on paper; sage MUST NOT replace reading color when contrast would fall below AA.

#### Scenario: Primary text is readable

- **WHEN** primary body text is rendered on its background color
- **THEN** the contrast ratio MUST meet WCAG AA minimums

#### Scenario: Olive on paper interactive text is readable

- **WHEN** primary buttons or links use olive tokens on paper backgrounds (or paper text on olive)
- **THEN** the contrast ratio MUST meet WCAG AA minimums

### Requirement: Elevation comes from tonal fields not card shadows

The public site SHALL express hierarchy through tonal paper fields, 1px botanical rules, and editorial overlap. Regular content components MUST NOT use short grey SaaS card shadows.

#### Scenario: Content cards omit drop shadows

- **WHEN** home services, testimonials, or portfolio items are rendered
- **THEN** they MUST NOT depend on `--amare-shadow-*` card elevation for hierarchy
- **AND** separation MUST come from borders, tonal backgrounds, or whitespace