import type { Metadata } from "next";

import { PageHeader } from "@/components/design-system/page-header";
import { ChartColours, LimeRule, PrimitivePalette, SemanticTokens, StatusColours } from "@/components/design-system/sections/foundations/colour";
import { Borders, Elevation, FocusRing, Radius, Spacing } from "@/components/design-system/sections/foundations/scales";
import { Families, TabularFigures, TypeScale } from "@/components/design-system/sections/foundations/typography";

export const metadata: Metadata = { title: "Foundations | Medora Design System" };

export default function FoundationsPage() {
  return (
    <>
      <PageHeader
        title="Foundations"
        description="The Medora tokens as they reach shadcn: colour roles, type scale, spacing, radius and elevation. Everything here is read from design/design-tokens.json and the theme variables, never hard-coded."
      />
      <PrimitivePalette />
      <LimeRule />
      <SemanticTokens />
      <StatusColours />
      <ChartColours />
      <Families />
      <TypeScale />
      <TabularFigures />
      <Spacing />
      <Radius />
      <Borders />
      <Elevation />
      <FocusRing />
    </>
  );
}