feat: enhance typography and accessibility in design system

- Added new UI heading utility with specific styles in typography.css.
- Updated typography tests to include new UI heading role and ensure proper size and styling.
- Documented design system audit findings, focusing on accessibility improvements and component consistency.
- Introduced CalendarExamples component to demonstrate calendar functionality with habit tracking.
- Created a shared Field component for consistent labeling and hinting of form controls.
- Implemented comprehensive accessibility tests for calendar and editor components, ensuring proper focus management and keyboard navigation.
- Added structure tests for Field and Card components to verify correct ID generation and heading levels.

README.md

@@ -19,21 +19,29 @@ Open http://127.0.0.1:3000. Set `PORT` to use a different port.
 
 ### Design system preview
 
-The library uses seven tabs: Foundations, Components, Layout, Calendars, Playground,
-Editing, and References. Foundations is the default. Each tab has a URL hash;
-existing section links still work. Arrow keys, Home, and End navigate the tabs.
-Switching tabs preserves unsaved demo state; browser back/forward restores the section.
+The library uses four tabs: Foundations, Components, Layout, and Calendars.
+Foundations is the default. Arrow keys, Home, and End navigate the tabs; URL
+hashes and browser back/forward restore the section. Switching tabs preserves
+local example state. Old `#playground` links open `#calendar-states`; removed
+`#editing` and `#views` links resolve to `#foundations`.
 
-Open `/design-system#editing` for interactive habit settings, task recurrence,
-and dated progress corrections. Habit colors include Earth, Coast, Dusk, Forest,
-Citrus, Blossom, Jewel, and Slate palettes plus a native picker and hex input. Editors support save/cancel,
-archive/restore, and an in-session correction history. The backfill calendar
-uses frozen historical requirements, independent of edits to today's settings.
-These are unsaved, local UI examples with a fixed September 4, 2026 demo clock;
-they do not call the habit API or change account data. Reload or Reset editor
-clears the preview. Habit colors preview immediately across the editor and the
-daily/detail charts; Save keeps the color in the demo and Cancel restores it.
-Other settings and progress remain independent of the daily tracking playground.
+Open `/design-system#calendar-states` for progress states and three working
+calendar examples: a count target, a manual checkbox, and combined completion.
+Changing water or reading progress updates today's combined score. Each calendar
+supports 3/4/6/12-month ranges, a Custom start/end date range within available
+history, date inspection, and keyboard navigation. Custom dates are inclusive;
+Apply range updates the chart. Dates
+form one continuous weekly chart with shared month and weekday labels and a fixed
+4px gap between dates across every timeframe. Landscape
+views fit the available width without chart scrollbars; narrow portrait views
+retain 24px date targets in a local horizontal scroller. Primary controls use
+44px targets, and custom checkboxes retain native semantics in forced-color mode.
+These examples use a fixed September 4, 2026 demo date and do not call the API;
+reload or Reset examples restores their initial progress.
+
+The Playground, Editing, and References showcase tabs have been removed.
+Reusable calendar, editing, color-picker components and reference assets remain
+available for future pages.
 
 The previous Landing, Home, About, and Settings pages have been removed. The
 backend API, authentication infrastructure, database, and reusable components remain
@@ -52,7 +60,26 @@ in rem. At 640px and below, display steps to 48/54 and section to 36/45; body an
 supporting text never shrink. Use these classes directly or with `@apply`, not
 bespoke font sizes or viewport-based type. See `/design-system#foundations` for
 live specimens. Reuse `SectionHeading`, `Button`, `ButtonLink`, and the shared
-`DiscordSignInButton` for headings and calls to action.
+`DiscordSignInButton` for headings and calls to action. All default button variants,
+including text/ghost buttons and links, share 10px vertical and 19px horizontal
+padding. Ghost changes only colors and border visibility; counter buttons retain
+their explicit 44px square sizing.
+Use `type-ui-heading` (18/27, medium system sans) for interface headings, field
+labels, and form legends; it stays visibly larger than 14/21 supporting text at
+every breakpoint. Preserve serif `type-title` and `type-section` for editorial
+headings. Use `type-eyebrow` for 12/18 section markers. `Field` supplies a control ID and hint ID through its
+render callback; apply both to the native control. `Card.headingLevel` defaults
+to 3 and can be set to match its surrounding document hierarchy without changing
+its appearance.
+
+Interface colors use the existing neutral palette through `--ds-ink`,
+`--ds-secondary`, `--ds-control-border`, `--ds-rule`, `--ds-paper`,
+`--ds-surface` (the existing #F5F5F5 fill), and `--ds-empty` (the existing #EEEEEE
+calendar fill). Use secondary for muted text and primary hover, surface for
+neutral hover/grouping, and control-border for actionable boundaries. Keep the
+calendar progress ramp and habit identity colors separate. Foundations lists the
+values and roles. Supporting copy should explain a consequence, constraint, or
+interaction; omit prose that merely restates a heading or visible control.
 
 ```sh
 bun run typecheck