## Full Example: Multi-page App

Here's a complete example (a contact manager) demonstrating routing, state management, CSS, dark mode, and dynamic content:

```typescript
import A from 'aberdeen';
import * as route from 'aberdeen/route';
import { Dispatcher } from 'aberdeen/dispatcher';
import { grow, shrink } from 'aberdeen/transitions';

class Contact {
    constructor(
        public id: number,
        public firstName: string,
        public lastName: string,
        public email: string,
        public phone: string
    ) {}
}

// Enable link interception for SPA navigation
route.interceptLinks();

// Initialize $1-$12 CSS variables for consistent spacing ($2=0.5rem, $3=1rem, $4=2rem, etc.)
A.setSpacingCssVars();

// Reactive theme based on system preference
A(() => {
    A.cssVars.primary = '#2563eb';
    A.cssVars.bg = A.darkMode() ? '#0f172a' : '#ffffff';
    A.cssVars.fg = A.darkMode() ? '#e2e8f0' : '#1e293b';
    A.cssVars.cardBg = A.darkMode() ? '#1e293b' : '#f8fafc';
    A.cssVars.border = A.darkMode() ? '#334155' : '#e2e8f0';
});

// Global styles for semantic HTML elements that apply everywhere
A.insertGlobalCss({
    "*": "m:0 p:0",
    "body": "bg:$bg fg:$fg font-family: system-ui, sans-serif;",
    "a": "color:$primary text-decoration:none",
    "a:hover": "text-decoration:underline",
    "a[role=button]": "bg:$primary fg:white r:8px p:$2",
});

// Application state
const $contacts = A.proxy([
    new Contact(1, 'Emma', 'Wilson', 'emma.wilson@email.com', '555-0101'),
    new Contact(2, 'James', 'Anderson', 'j.anderson@email.com', '555-0102'),
    new Contact(3, 'Sofia', 'Martinez', 'sofia.m@email.com', '555-0103'),
    new Contact(4, 'Liam', 'Brown', 'liam.brown@email.com', '555-0104')
]);

// Router setup
const dispatcher = new Dispatcher();
dispatcher.addRoute(drawHome);
dispatcher.addRoute('contacts', drawContactList);
dispatcher.addRoute('contacts', Number, drawContactDetail);

// Main app
A('div.app', () => {
    A('nav display:flex gap:$3 p:$3 border-bottom: 1px solid $border;', () => {
        A('a href=/ text=Home font-weight:', route.current.p.length === 0 ? 'bold' : 'normal');
        A('a href=/contacts text=Contacts font-weight:', route.current.p[0] === 'contacts' ? 'bold' : 'normal');
    });
    A('main p:$3', () => dispatcher.dispatch(route.current.p));
});

function drawHome() {
    A('h1#Contact Manager');
    A('p#A modern contact list with search, sort, and dark mode support.');
}

// Contact card styles
const cardStyle = A.insertCss({
    "&": "bg:$cardBg border: 1px solid $border; r:8px p:$3 mv:$2 display:block transition: transform 0.2s;",
    "&:hover": "transform:translateX(4px)",
    "a&": "color:inherit;",
});

const filterStyle = A.insertCss({
    "&": "display:flex gap:$3 mv:$3",
    "> *": "p:$2 r:4px bg:$bg fg:$fg border: 1px solid $border;",
});

function drawContactList() {
    A('h1#Contacts');
    
    // Search and sort controls
    A('div', filterStyle, () => {
        A('input flex:1 placeholder="Search contacts..." bind=', A.ref(route.current.search, 'q'));
        A('select bind=', A.ref(route.current.search, 'sort'), () => {
            A('option value=firstName #First Name');
            A('option value=lastName #Last Name');
            A('option value=email #Email');
        });
    });
    
    // Contact list
    A('div', () => {
        const sortBy = route.current.search.sort || 'firstName';

        const $filtered = A.map($contacts, $contact => {
            const query = route.current.search.q;
            if (query) {
                const info = `${$contact.firstName} ${$contact.lastName} ${$contact.email}`;
                if (!info.toLowerCase().includes(query.toLowerCase())) return; // Skip!
            }
            return $contact;
        });
        
        A.onEach($filtered, $contact => {
            A('a', cardStyle, 'create=', grow, 'destroy=', shrink, `href=/contacts/${$contact.id}`, () => {
                A('h2', () => {
                    A('span font-weight:normal text=', $contact.firstName+" ");
                    A('span text=', $contact.lastName);
                });
                A('div text=', $contact.email);
            });
        }, $contact => $contact[sortBy].toLowerCase());

        A(`a role=button mt:$3 text="Add new contact" href=/contacts/${$contacts.length}`);
    });
}

// Detail form styles
const detailStyle = A.insertCss({
    "&": "bg:$cardBg border: 1px solid $border; r:8px p:$4 max-width:600px",
    "label": "display:block font-weight:600 mt:$3 mb:$2",
    "input": "w:100% p:$2 r:4px border: 1px solid $border; bg:$bg fg:$fg"
});

function drawContactDetail(id: number) {
    $contacts[id] ||= new Contact(id, '', '', '', '');
    const $contact = $contacts[id];
    
    A('a role=button href=/contacts #← Back');
    
    A('div mt:$3', detailStyle, () => {
        A('h2 mb:$2 text=', A.ref($contact, 'firstName'), 'text=', ' ', 'text=', A.ref($contact, 'lastName'));
        A('label text="First Name" input bind=', A.ref($contact, 'firstName'));
        A('label text="Last Name" input bind=', A.ref($contact, 'lastName'));
        A('label text="Email" input type=email bind=', A.ref($contact, 'email'));     
        A('label text="Phone" input type=tel bind=', A.ref($contact, 'phone'));
    });
}
```