@ptbdynamic/plinth 0.0.0-stage → 0.2.0

package/packages/tokens/dist/index.js

@@ -0,0 +1,4091 @@
+/* Built from packages/tokens/tokens/*.json. Do not edit by hand. */
+/** Every token: primitives, semantic and component. */
+export const tokens = [
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "0"
+    ],
+    "name": "--plinth-ref-color-neutral-0",
+    "cssVar": "var(--plinth-ref-color-neutral-0)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(1 0 0)",
+    "css": "oklch(1 0 0)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "50"
+    ],
+    "name": "--plinth-ref-color-neutral-50",
+    "cssVar": "var(--plinth-ref-color-neutral-50)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.985 0.002 260)",
+    "css": "oklch(0.985 0.002 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "100"
+    ],
+    "name": "--plinth-ref-color-neutral-100",
+    "cssVar": "var(--plinth-ref-color-neutral-100)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.965 0.003 260)",
+    "css": "oklch(0.965 0.003 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "150"
+    ],
+    "name": "--plinth-ref-color-neutral-150",
+    "cssVar": "var(--plinth-ref-color-neutral-150)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.945 0.004 260)",
+    "css": "oklch(0.945 0.004 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "200"
+    ],
+    "name": "--plinth-ref-color-neutral-200",
+    "cssVar": "var(--plinth-ref-color-neutral-200)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.92 0.004 260)",
+    "css": "oklch(0.92 0.004 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "300"
+    ],
+    "name": "--plinth-ref-color-neutral-300",
+    "cssVar": "var(--plinth-ref-color-neutral-300)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.82 0.005 260)",
+    "css": "oklch(0.82 0.005 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "400"
+    ],
+    "name": "--plinth-ref-color-neutral-400",
+    "cssVar": "var(--plinth-ref-color-neutral-400)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.71 0.008 260)",
+    "css": "oklch(0.71 0.008 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "500"
+    ],
+    "name": "--plinth-ref-color-neutral-500",
+    "cssVar": "var(--plinth-ref-color-neutral-500)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.54 0.01 260)",
+    "css": "oklch(0.54 0.01 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "600"
+    ],
+    "name": "--plinth-ref-color-neutral-600",
+    "cssVar": "var(--plinth-ref-color-neutral-600)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.45 0.01 260)",
+    "css": "oklch(0.45 0.01 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "700"
+    ],
+    "name": "--plinth-ref-color-neutral-700",
+    "cssVar": "var(--plinth-ref-color-neutral-700)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.37 0.01 260)",
+    "css": "oklch(0.37 0.01 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "800"
+    ],
+    "name": "--plinth-ref-color-neutral-800",
+    "cssVar": "var(--plinth-ref-color-neutral-800)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.27 0.008 260)",
+    "css": "oklch(0.27 0.008 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "850"
+    ],
+    "name": "--plinth-ref-color-neutral-850",
+    "cssVar": "var(--plinth-ref-color-neutral-850)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.235 0.007 260)",
+    "css": "oklch(0.235 0.007 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "900"
+    ],
+    "name": "--plinth-ref-color-neutral-900",
+    "cssVar": "var(--plinth-ref-color-neutral-900)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.205 0.006 260)",
+    "css": "oklch(0.205 0.006 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "950"
+    ],
+    "name": "--plinth-ref-color-neutral-950",
+    "cssVar": "var(--plinth-ref-color-neutral-950)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.18 0.005 260)",
+    "css": "oklch(0.18 0.005 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "neutral",
+      "1000"
+    ],
+    "name": "--plinth-ref-color-neutral-1000",
+    "cssVar": "var(--plinth-ref-color-neutral-1000)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.145 0.004 260)",
+    "css": "oklch(0.145 0.004 260)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "50"
+    ],
+    "name": "--plinth-ref-color-brand-50",
+    "cssVar": "var(--plinth-ref-color-brand-50)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#eff6ff",
+    "css": "#eff6ff"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "100"
+    ],
+    "name": "--plinth-ref-color-brand-100",
+    "cssVar": "var(--plinth-ref-color-brand-100)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#dbeafe",
+    "css": "#dbeafe"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "200"
+    ],
+    "name": "--plinth-ref-color-brand-200",
+    "cssVar": "var(--plinth-ref-color-brand-200)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#bfdbfe",
+    "css": "#bfdbfe"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "300"
+    ],
+    "name": "--plinth-ref-color-brand-300",
+    "cssVar": "var(--plinth-ref-color-brand-300)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#93c5fd",
+    "css": "#93c5fd"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "400"
+    ],
+    "name": "--plinth-ref-color-brand-400",
+    "cssVar": "var(--plinth-ref-color-brand-400)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#60a5fa",
+    "css": "#60a5fa"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "500"
+    ],
+    "name": "--plinth-ref-color-brand-500",
+    "cssVar": "var(--plinth-ref-color-brand-500)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#3b82f6",
+    "css": "#3b82f6"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "600"
+    ],
+    "name": "--plinth-ref-color-brand-600",
+    "cssVar": "var(--plinth-ref-color-brand-600)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#2563eb",
+    "css": "#2563eb"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "700"
+    ],
+    "name": "--plinth-ref-color-brand-700",
+    "cssVar": "var(--plinth-ref-color-brand-700)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#1d4ed8",
+    "css": "#1d4ed8"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "800"
+    ],
+    "name": "--plinth-ref-color-brand-800",
+    "cssVar": "var(--plinth-ref-color-brand-800)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#1e40af",
+    "css": "#1e40af"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "900"
+    ],
+    "name": "--plinth-ref-color-brand-900",
+    "cssVar": "var(--plinth-ref-color-brand-900)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#1e3a8a",
+    "css": "#1e3a8a"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "brand",
+      "950"
+    ],
+    "name": "--plinth-ref-color-brand-950",
+    "cssVar": "var(--plinth-ref-color-brand-950)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#172554",
+    "css": "#172554"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "50"
+    ],
+    "name": "--plinth-ref-color-green-50",
+    "cssVar": "var(--plinth-ref-color-green-50)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#f0fdf4",
+    "css": "#f0fdf4"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "100"
+    ],
+    "name": "--plinth-ref-color-green-100",
+    "cssVar": "var(--plinth-ref-color-green-100)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#dcfce7",
+    "css": "#dcfce7"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "200"
+    ],
+    "name": "--plinth-ref-color-green-200",
+    "cssVar": "var(--plinth-ref-color-green-200)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#bbf7d0",
+    "css": "#bbf7d0"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "400"
+    ],
+    "name": "--plinth-ref-color-green-400",
+    "cssVar": "var(--plinth-ref-color-green-400)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#4ade80",
+    "css": "#4ade80"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "600"
+    ],
+    "name": "--plinth-ref-color-green-600",
+    "cssVar": "var(--plinth-ref-color-green-600)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#16a34a",
+    "css": "#16a34a"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "700"
+    ],
+    "name": "--plinth-ref-color-green-700",
+    "cssVar": "var(--plinth-ref-color-green-700)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#15803d",
+    "css": "#15803d"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "800"
+    ],
+    "name": "--plinth-ref-color-green-800",
+    "cssVar": "var(--plinth-ref-color-green-800)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#166534",
+    "css": "#166534"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "green",
+      "950"
+    ],
+    "name": "--plinth-ref-color-green-950",
+    "cssVar": "var(--plinth-ref-color-green-950)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#052e16",
+    "css": "#052e16"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "50"
+    ],
+    "name": "--plinth-ref-color-amber-50",
+    "cssVar": "var(--plinth-ref-color-amber-50)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#fffbeb",
+    "css": "#fffbeb"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "100"
+    ],
+    "name": "--plinth-ref-color-amber-100",
+    "cssVar": "var(--plinth-ref-color-amber-100)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#fef3c7",
+    "css": "#fef3c7"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "200"
+    ],
+    "name": "--plinth-ref-color-amber-200",
+    "cssVar": "var(--plinth-ref-color-amber-200)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#fde68a",
+    "css": "#fde68a"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "400"
+    ],
+    "name": "--plinth-ref-color-amber-400",
+    "cssVar": "var(--plinth-ref-color-amber-400)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#fbbf24",
+    "css": "#fbbf24"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "500"
+    ],
+    "name": "--plinth-ref-color-amber-500",
+    "cssVar": "var(--plinth-ref-color-amber-500)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#f59e0b",
+    "css": "#f59e0b"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "700"
+    ],
+    "name": "--plinth-ref-color-amber-700",
+    "cssVar": "var(--plinth-ref-color-amber-700)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#b45309",
+    "css": "#b45309"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "800"
+    ],
+    "name": "--plinth-ref-color-amber-800",
+    "cssVar": "var(--plinth-ref-color-amber-800)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#92400e",
+    "css": "#92400e"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "amber",
+      "950"
+    ],
+    "name": "--plinth-ref-color-amber-950",
+    "cssVar": "var(--plinth-ref-color-amber-950)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#451a03",
+    "css": "#451a03"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "50"
+    ],
+    "name": "--plinth-ref-color-red-50",
+    "cssVar": "var(--plinth-ref-color-red-50)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#fef2f2",
+    "css": "#fef2f2"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "100"
+    ],
+    "name": "--plinth-ref-color-red-100",
+    "cssVar": "var(--plinth-ref-color-red-100)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#fee2e2",
+    "css": "#fee2e2"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "200"
+    ],
+    "name": "--plinth-ref-color-red-200",
+    "cssVar": "var(--plinth-ref-color-red-200)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#fecaca",
+    "css": "#fecaca"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "400"
+    ],
+    "name": "--plinth-ref-color-red-400",
+    "cssVar": "var(--plinth-ref-color-red-400)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#f87171",
+    "css": "#f87171"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "600"
+    ],
+    "name": "--plinth-ref-color-red-600",
+    "cssVar": "var(--plinth-ref-color-red-600)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#dc2626",
+    "css": "#dc2626"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "700"
+    ],
+    "name": "--plinth-ref-color-red-700",
+    "cssVar": "var(--plinth-ref-color-red-700)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#b91c1c",
+    "css": "#b91c1c"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "800"
+    ],
+    "name": "--plinth-ref-color-red-800",
+    "cssVar": "var(--plinth-ref-color-red-800)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#991b1b",
+    "css": "#991b1b"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "red",
+      "950"
+    ],
+    "name": "--plinth-ref-color-red-950",
+    "cssVar": "var(--plinth-ref-color-red-950)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#450a0a",
+    "css": "#450a0a"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "black-alpha",
+      "10"
+    ],
+    "name": "--plinth-ref-color-black-alpha-10",
+    "cssVar": "var(--plinth-ref-color-black-alpha-10)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#0000001a",
+    "css": "#0000001a"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "black-alpha",
+      "15"
+    ],
+    "name": "--plinth-ref-color-black-alpha-15",
+    "cssVar": "var(--plinth-ref-color-black-alpha-15)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#00000026",
+    "css": "#00000026"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "black-alpha",
+      "30"
+    ],
+    "name": "--plinth-ref-color-black-alpha-30",
+    "cssVar": "var(--plinth-ref-color-black-alpha-30)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#0000004d",
+    "css": "#0000004d"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "black-alpha",
+      "50"
+    ],
+    "name": "--plinth-ref-color-black-alpha-50",
+    "cssVar": "var(--plinth-ref-color-black-alpha-50)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#00000080",
+    "css": "#00000080"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "black-alpha",
+      "60"
+    ],
+    "name": "--plinth-ref-color-black-alpha-60",
+    "cssVar": "var(--plinth-ref-color-black-alpha-60)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#00000099",
+    "css": "#00000099"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "black-alpha",
+      "70"
+    ],
+    "name": "--plinth-ref-color-black-alpha-70",
+    "cssVar": "var(--plinth-ref-color-black-alpha-70)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#000000b3",
+    "css": "#000000b3"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "ink-alpha",
+      "6"
+    ],
+    "name": "--plinth-ref-color-ink-alpha-6",
+    "cssVar": "var(--plinth-ref-color-ink-alpha-6)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.18 0.005 260 / 0.06)",
+    "css": "oklch(0.18 0.005 260 / 0.06)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "ink-alpha",
+      "10"
+    ],
+    "name": "--plinth-ref-color-ink-alpha-10",
+    "cssVar": "var(--plinth-ref-color-ink-alpha-10)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.18 0.005 260 / 0.1)",
+    "css": "oklch(0.18 0.005 260 / 0.1)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "ink-alpha",
+      "20"
+    ],
+    "name": "--plinth-ref-color-ink-alpha-20",
+    "cssVar": "var(--plinth-ref-color-ink-alpha-20)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.18 0.005 260 / 0.2)",
+    "css": "oklch(0.18 0.005 260 / 0.2)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "chalk-alpha",
+      "6"
+    ],
+    "name": "--plinth-ref-color-chalk-alpha-6",
+    "cssVar": "var(--plinth-ref-color-chalk-alpha-6)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.965 0.003 260 / 0.06)",
+    "css": "oklch(0.965 0.003 260 / 0.06)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "chalk-alpha",
+      "10"
+    ],
+    "name": "--plinth-ref-color-chalk-alpha-10",
+    "cssVar": "var(--plinth-ref-color-chalk-alpha-10)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.965 0.003 260 / 0.1)",
+    "css": "oklch(0.965 0.003 260 / 0.1)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "chalk-alpha",
+      "20"
+    ],
+    "name": "--plinth-ref-color-chalk-alpha-20",
+    "cssVar": "var(--plinth-ref-color-chalk-alpha-20)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "oklch(0.965 0.003 260 / 0.2)",
+    "css": "oklch(0.965 0.003 260 / 0.2)"
+  },
+  {
+    "path": [
+      "ref",
+      "color",
+      "white-alpha",
+      "12"
+    ],
+    "name": "--plinth-ref-color-white-alpha-12",
+    "cssVar": "var(--plinth-ref-color-white-alpha-12)",
+    "tier": "primitive",
+    "type": "color",
+    "value": "#ffffff1f",
+    "css": "#ffffff1f"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "0"
+    ],
+    "name": "--plinth-ref-space-0",
+    "cssVar": "var(--plinth-ref-space-0)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0",
+    "css": "0"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "1"
+    ],
+    "name": "--plinth-ref-space-1",
+    "cssVar": "var(--plinth-ref-space-1)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.25rem",
+    "css": "0.25rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "2"
+    ],
+    "name": "--plinth-ref-space-2",
+    "cssVar": "var(--plinth-ref-space-2)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.5rem",
+    "css": "0.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "3"
+    ],
+    "name": "--plinth-ref-space-3",
+    "cssVar": "var(--plinth-ref-space-3)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.75rem",
+    "css": "0.75rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "4"
+    ],
+    "name": "--plinth-ref-space-4",
+    "cssVar": "var(--plinth-ref-space-4)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1rem",
+    "css": "1rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "5"
+    ],
+    "name": "--plinth-ref-space-5",
+    "cssVar": "var(--plinth-ref-space-5)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.25rem",
+    "css": "1.25rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "6"
+    ],
+    "name": "--plinth-ref-space-6",
+    "cssVar": "var(--plinth-ref-space-6)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.5rem",
+    "css": "1.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "8"
+    ],
+    "name": "--plinth-ref-space-8",
+    "cssVar": "var(--plinth-ref-space-8)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "2rem",
+    "css": "2rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "10"
+    ],
+    "name": "--plinth-ref-space-10",
+    "cssVar": "var(--plinth-ref-space-10)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "2.5rem",
+    "css": "2.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "12"
+    ],
+    "name": "--plinth-ref-space-12",
+    "cssVar": "var(--plinth-ref-space-12)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "3rem",
+    "css": "3rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "14"
+    ],
+    "name": "--plinth-ref-space-14",
+    "cssVar": "var(--plinth-ref-space-14)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "3.5rem",
+    "css": "3.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "16"
+    ],
+    "name": "--plinth-ref-space-16",
+    "cssVar": "var(--plinth-ref-space-16)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "4rem",
+    "css": "4rem"
+  },
+  {
+    "path": [
+      "ref",
+      "space",
+      "0-5"
+    ],
+    "name": "--plinth-ref-space-0-5",
+    "cssVar": "var(--plinth-ref-space-0-5)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.125rem",
+    "css": "0.125rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "16"
+    ],
+    "name": "--plinth-ref-size-16",
+    "cssVar": "var(--plinth-ref-size-16)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1rem",
+    "css": "1rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "20"
+    ],
+    "name": "--plinth-ref-size-20",
+    "cssVar": "var(--plinth-ref-size-20)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.25rem",
+    "css": "1.25rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "24"
+    ],
+    "name": "--plinth-ref-size-24",
+    "cssVar": "var(--plinth-ref-size-24)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.5rem",
+    "css": "1.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "28"
+    ],
+    "name": "--plinth-ref-size-28",
+    "cssVar": "var(--plinth-ref-size-28)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.75rem",
+    "css": "1.75rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "32"
+    ],
+    "name": "--plinth-ref-size-32",
+    "cssVar": "var(--plinth-ref-size-32)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "2rem",
+    "css": "2rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "40"
+    ],
+    "name": "--plinth-ref-size-40",
+    "cssVar": "var(--plinth-ref-size-40)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "2.5rem",
+    "css": "2.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "44"
+    ],
+    "name": "--plinth-ref-size-44",
+    "cssVar": "var(--plinth-ref-size-44)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "2.75rem",
+    "css": "2.75rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "56"
+    ],
+    "name": "--plinth-ref-size-56",
+    "cssVar": "var(--plinth-ref-size-56)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "3.5rem",
+    "css": "3.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "160"
+    ],
+    "name": "--plinth-ref-size-160",
+    "cssVar": "var(--plinth-ref-size-160)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "10rem",
+    "css": "10rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "192"
+    ],
+    "name": "--plinth-ref-size-192",
+    "cssVar": "var(--plinth-ref-size-192)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "12rem",
+    "css": "12rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "320"
+    ],
+    "name": "--plinth-ref-size-320",
+    "cssVar": "var(--plinth-ref-size-320)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "20rem",
+    "css": "20rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "400"
+    ],
+    "name": "--plinth-ref-size-400",
+    "cssVar": "var(--plinth-ref-size-400)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "25rem",
+    "css": "25rem"
+  },
+  {
+    "path": [
+      "ref",
+      "size",
+      "480"
+    ],
+    "name": "--plinth-ref-size-480",
+    "cssVar": "var(--plinth-ref-size-480)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "30rem",
+    "css": "30rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "0"
+    ],
+    "name": "--plinth-ref-radius-0",
+    "cssVar": "var(--plinth-ref-radius-0)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0",
+    "css": "0"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "2"
+    ],
+    "name": "--plinth-ref-radius-2",
+    "cssVar": "var(--plinth-ref-radius-2)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.125rem",
+    "css": "0.125rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "4"
+    ],
+    "name": "--plinth-ref-radius-4",
+    "cssVar": "var(--plinth-ref-radius-4)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.25rem",
+    "css": "0.25rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "6"
+    ],
+    "name": "--plinth-ref-radius-6",
+    "cssVar": "var(--plinth-ref-radius-6)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.375rem",
+    "css": "0.375rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "8"
+    ],
+    "name": "--plinth-ref-radius-8",
+    "cssVar": "var(--plinth-ref-radius-8)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.5rem",
+    "css": "0.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "10"
+    ],
+    "name": "--plinth-ref-radius-10",
+    "cssVar": "var(--plinth-ref-radius-10)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.625rem",
+    "css": "0.625rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "12"
+    ],
+    "name": "--plinth-ref-radius-12",
+    "cssVar": "var(--plinth-ref-radius-12)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.75rem",
+    "css": "0.75rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "16"
+    ],
+    "name": "--plinth-ref-radius-16",
+    "cssVar": "var(--plinth-ref-radius-16)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1rem",
+    "css": "1rem"
+  },
+  {
+    "path": [
+      "ref",
+      "radius",
+      "full"
+    ],
+    "name": "--plinth-ref-radius-full",
+    "cssVar": "var(--plinth-ref-radius-full)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "9999px",
+    "css": "9999px"
+  },
+  {
+    "path": [
+      "ref",
+      "border-width",
+      "1"
+    ],
+    "name": "--plinth-ref-border-width-1",
+    "cssVar": "var(--plinth-ref-border-width-1)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1px",
+    "css": "1px"
+  },
+  {
+    "path": [
+      "ref",
+      "border-width",
+      "2"
+    ],
+    "name": "--plinth-ref-border-width-2",
+    "cssVar": "var(--plinth-ref-border-width-2)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "2px",
+    "css": "2px"
+  },
+  {
+    "path": [
+      "ref",
+      "border-width",
+      "3"
+    ],
+    "name": "--plinth-ref-border-width-3",
+    "cssVar": "var(--plinth-ref-border-width-3)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "3px",
+    "css": "3px"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "family",
+      "sans"
+    ],
+    "name": "--plinth-ref-font-family-sans",
+    "cssVar": "var(--plinth-ref-font-family-sans)",
+    "tier": "primitive",
+    "type": "fontFamily",
+    "value": "'Geist Variable', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "css": "'Geist Variable', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "family",
+      "mono"
+    ],
+    "name": "--plinth-ref-font-family-mono",
+    "cssVar": "var(--plinth-ref-font-family-mono)",
+    "tier": "primitive",
+    "type": "fontFamily",
+    "value": "'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+    "css": "'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "12"
+    ],
+    "name": "--plinth-ref-font-size-12",
+    "cssVar": "var(--plinth-ref-font-size-12)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.75rem",
+    "css": "0.75rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "13"
+    ],
+    "name": "--plinth-ref-font-size-13",
+    "cssVar": "var(--plinth-ref-font-size-13)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.8125rem",
+    "css": "0.8125rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "14"
+    ],
+    "name": "--plinth-ref-font-size-14",
+    "cssVar": "var(--plinth-ref-font-size-14)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.875rem",
+    "css": "0.875rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "15"
+    ],
+    "name": "--plinth-ref-font-size-15",
+    "cssVar": "var(--plinth-ref-font-size-15)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0.9375rem",
+    "css": "0.9375rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "16"
+    ],
+    "name": "--plinth-ref-font-size-16",
+    "cssVar": "var(--plinth-ref-font-size-16)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1rem",
+    "css": "1rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "18"
+    ],
+    "name": "--plinth-ref-font-size-18",
+    "cssVar": "var(--plinth-ref-font-size-18)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.125rem",
+    "css": "1.125rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "24"
+    ],
+    "name": "--plinth-ref-font-size-24",
+    "cssVar": "var(--plinth-ref-font-size-24)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.5rem",
+    "css": "1.5rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "30"
+    ],
+    "name": "--plinth-ref-font-size-30",
+    "cssVar": "var(--plinth-ref-font-size-30)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "1.875rem",
+    "css": "1.875rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "36"
+    ],
+    "name": "--plinth-ref-font-size-36",
+    "cssVar": "var(--plinth-ref-font-size-36)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "2.25rem",
+    "css": "2.25rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "48"
+    ],
+    "name": "--plinth-ref-font-size-48",
+    "cssVar": "var(--plinth-ref-font-size-48)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "3rem",
+    "css": "3rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "size",
+      "64"
+    ],
+    "name": "--plinth-ref-font-size-64",
+    "cssVar": "var(--plinth-ref-font-size-64)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "4rem",
+    "css": "4rem"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "weight",
+      "400"
+    ],
+    "name": "--plinth-ref-font-weight-400",
+    "cssVar": "var(--plinth-ref-font-weight-400)",
+    "tier": "primitive",
+    "type": "fontWeight",
+    "value": "400",
+    "css": "400"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "weight",
+      "500"
+    ],
+    "name": "--plinth-ref-font-weight-500",
+    "cssVar": "var(--plinth-ref-font-weight-500)",
+    "tier": "primitive",
+    "type": "fontWeight",
+    "value": "500",
+    "css": "500"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "weight",
+      "600"
+    ],
+    "name": "--plinth-ref-font-weight-600",
+    "cssVar": "var(--plinth-ref-font-weight-600)",
+    "tier": "primitive",
+    "type": "fontWeight",
+    "value": "600",
+    "css": "600"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "weight",
+      "700"
+    ],
+    "name": "--plinth-ref-font-weight-700",
+    "cssVar": "var(--plinth-ref-font-weight-700)",
+    "tier": "primitive",
+    "type": "fontWeight",
+    "value": "700",
+    "css": "700"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "leading",
+      "105"
+    ],
+    "name": "--plinth-ref-font-leading-105",
+    "cssVar": "var(--plinth-ref-font-leading-105)",
+    "tier": "primitive",
+    "type": "number",
+    "value": "1.05",
+    "css": "1.05"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "leading",
+      "125"
+    ],
+    "name": "--plinth-ref-font-leading-125",
+    "cssVar": "var(--plinth-ref-font-leading-125)",
+    "tier": "primitive",
+    "type": "number",
+    "value": "1.25",
+    "css": "1.25"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "leading",
+      "150"
+    ],
+    "name": "--plinth-ref-font-leading-150",
+    "cssVar": "var(--plinth-ref-font-leading-150)",
+    "tier": "primitive",
+    "type": "number",
+    "value": "1.5",
+    "css": "1.5"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "tracking",
+      "0"
+    ],
+    "name": "--plinth-ref-font-tracking-0",
+    "cssVar": "var(--plinth-ref-font-tracking-0)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "0",
+    "css": "0"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "tracking",
+      "neg-1"
+    ],
+    "name": "--plinth-ref-font-tracking-neg-1",
+    "cssVar": "var(--plinth-ref-font-tracking-neg-1)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "-0.01em",
+    "css": "-0.01em"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "tracking",
+      "neg-2"
+    ],
+    "name": "--plinth-ref-font-tracking-neg-2",
+    "cssVar": "var(--plinth-ref-font-tracking-neg-2)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "-0.02em",
+    "css": "-0.02em"
+  },
+  {
+    "path": [
+      "ref",
+      "font",
+      "tracking",
+      "neg-4"
+    ],
+    "name": "--plinth-ref-font-tracking-neg-4",
+    "cssVar": "var(--plinth-ref-font-tracking-neg-4)",
+    "tier": "primitive",
+    "type": "dimension",
+    "value": "-0.04em",
+    "css": "-0.04em"
+  },
+  {
+    "path": [
+      "ref",
+      "duration",
+      "120"
+    ],
+    "name": "--plinth-ref-duration-120",
+    "cssVar": "var(--plinth-ref-duration-120)",
+    "tier": "primitive",
+    "type": "duration",
+    "value": "120ms",
+    "css": "120ms"
+  },
+  {
+    "path": [
+      "ref",
+      "duration",
+      "200"
+    ],
+    "name": "--plinth-ref-duration-200",
+    "cssVar": "var(--plinth-ref-duration-200)",
+    "tier": "primitive",
+    "type": "duration",
+    "value": "200ms",
+    "css": "200ms"
+  },
+  {
+    "path": [
+      "ref",
+      "duration",
+      "320"
+    ],
+    "name": "--plinth-ref-duration-320",
+    "cssVar": "var(--plinth-ref-duration-320)",
+    "tier": "primitive",
+    "type": "duration",
+    "value": "320ms",
+    "css": "320ms"
+  },
+  {
+    "path": [
+      "ref",
+      "easing",
+      "standard"
+    ],
+    "name": "--plinth-ref-easing-standard",
+    "cssVar": "var(--plinth-ref-easing-standard)",
+    "tier": "primitive",
+    "type": "cubicBezier",
+    "value": "cubic-bezier(0.2, 0, 0, 1)",
+    "css": "cubic-bezier(0.2, 0, 0, 1)"
+  },
+  {
+    "path": [
+      "ref",
+      "easing",
+      "enter"
+    ],
+    "name": "--plinth-ref-easing-enter",
+    "cssVar": "var(--plinth-ref-easing-enter)",
+    "tier": "primitive",
+    "type": "cubicBezier",
+    "value": "cubic-bezier(0, 0, 0, 1)",
+    "css": "cubic-bezier(0, 0, 0, 1)"
+  },
+  {
+    "path": [
+      "ref",
+      "easing",
+      "exit"
+    ],
+    "name": "--plinth-ref-easing-exit",
+    "cssVar": "var(--plinth-ref-easing-exit)",
+    "tier": "primitive",
+    "type": "cubicBezier",
+    "value": "cubic-bezier(0.3, 0, 1, 1)",
+    "css": "cubic-bezier(0.3, 0, 1, 1)"
+  },
+  {
+    "path": [
+      "space",
+      "0"
+    ],
+    "name": "--plinth-space-0",
+    "cssVar": "var(--plinth-space-0)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0",
+    "ref": "ref.space.0",
+    "css": "var(--plinth-ref-space-0)"
+  },
+  {
+    "path": [
+      "space",
+      "1"
+    ],
+    "name": "--plinth-space-1",
+    "cssVar": "var(--plinth-space-1)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.25rem",
+    "ref": "ref.space.1",
+    "css": "var(--plinth-ref-space-1)"
+  },
+  {
+    "path": [
+      "space",
+      "2"
+    ],
+    "name": "--plinth-space-2",
+    "cssVar": "var(--plinth-space-2)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.5rem",
+    "ref": "ref.space.2",
+    "css": "var(--plinth-ref-space-2)"
+  },
+  {
+    "path": [
+      "space",
+      "3"
+    ],
+    "name": "--plinth-space-3",
+    "cssVar": "var(--plinth-space-3)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.75rem",
+    "ref": "ref.space.3",
+    "css": "var(--plinth-ref-space-3)"
+  },
+  {
+    "path": [
+      "space",
+      "4"
+    ],
+    "name": "--plinth-space-4",
+    "cssVar": "var(--plinth-space-4)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1rem",
+    "ref": "ref.space.4",
+    "css": "var(--plinth-ref-space-4)"
+  },
+  {
+    "path": [
+      "space",
+      "5"
+    ],
+    "name": "--plinth-space-5",
+    "cssVar": "var(--plinth-space-5)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.25rem",
+    "ref": "ref.space.5",
+    "css": "var(--plinth-ref-space-5)"
+  },
+  {
+    "path": [
+      "space",
+      "6"
+    ],
+    "name": "--plinth-space-6",
+    "cssVar": "var(--plinth-space-6)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.5rem",
+    "ref": "ref.space.6",
+    "css": "var(--plinth-ref-space-6)"
+  },
+  {
+    "path": [
+      "space",
+      "8"
+    ],
+    "name": "--plinth-space-8",
+    "cssVar": "var(--plinth-space-8)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2rem",
+    "ref": "ref.space.8",
+    "css": "var(--plinth-ref-space-8)"
+  },
+  {
+    "path": [
+      "space",
+      "10"
+    ],
+    "name": "--plinth-space-10",
+    "cssVar": "var(--plinth-space-10)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2.5rem",
+    "ref": "ref.space.10",
+    "css": "var(--plinth-ref-space-10)"
+  },
+  {
+    "path": [
+      "space",
+      "12"
+    ],
+    "name": "--plinth-space-12",
+    "cssVar": "var(--plinth-space-12)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "3rem",
+    "ref": "ref.space.12",
+    "css": "var(--plinth-ref-space-12)"
+  },
+  {
+    "path": [
+      "space",
+      "14"
+    ],
+    "name": "--plinth-space-14",
+    "cssVar": "var(--plinth-space-14)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "3.5rem",
+    "ref": "ref.space.14",
+    "css": "var(--plinth-ref-space-14)"
+  },
+  {
+    "path": [
+      "space",
+      "16"
+    ],
+    "name": "--plinth-space-16",
+    "cssVar": "var(--plinth-space-16)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "4rem",
+    "ref": "ref.space.16",
+    "css": "var(--plinth-ref-space-16)"
+  },
+  {
+    "path": [
+      "space",
+      "0-5"
+    ],
+    "name": "--plinth-space-0-5",
+    "cssVar": "var(--plinth-space-0-5)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.125rem",
+    "ref": "ref.space.0-5",
+    "css": "var(--plinth-ref-space-0-5)"
+  },
+  {
+    "path": [
+      "radius",
+      "control"
+    ],
+    "name": "--plinth-radius-control",
+    "cssVar": "var(--plinth-radius-control)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "Buttons, inputs and other controls.",
+    "value": "0.375rem",
+    "ref": "ref.radius.6",
+    "css": "var(--plinth-ref-radius-6)"
+  },
+  {
+    "path": [
+      "radius",
+      "container"
+    ],
+    "name": "--plinth-radius-container",
+    "cssVar": "var(--plinth-radius-container)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "Cards, sheets and dialogs.",
+    "value": "0.625rem",
+    "ref": "ref.radius.10",
+    "css": "var(--plinth-ref-radius-10)"
+  },
+  {
+    "path": [
+      "radius",
+      "pill"
+    ],
+    "name": "--plinth-radius-pill",
+    "cssVar": "var(--plinth-radius-pill)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "Badges and other pill shapes.",
+    "value": "9999px",
+    "ref": "ref.radius.full",
+    "css": "var(--plinth-ref-radius-full)"
+  },
+  {
+    "path": [
+      "border-width",
+      "thin"
+    ],
+    "name": "--plinth-border-width-thin",
+    "cssVar": "var(--plinth-border-width-thin)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "Control and card edges.",
+    "value": "1px",
+    "ref": "ref.border-width.1",
+    "css": "var(--plinth-ref-border-width-1)"
+  },
+  {
+    "path": [
+      "border-width",
+      "thick"
+    ],
+    "name": "--plinth-border-width-thick",
+    "cssVar": "var(--plinth-border-width-thick)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "Strokes that must stay visible, such as a spinner, and the edge of a selected item, so selection is never shown by colour alone.",
+    "value": "2px",
+    "ref": "ref.border-width.2",
+    "css": "var(--plinth-ref-border-width-2)"
+  },
+  {
+    "path": [
+      "opacity",
+      "disabled"
+    ],
+    "name": "--plinth-opacity-disabled",
+    "cssVar": "var(--plinth-opacity-disabled)",
+    "tier": "semantic",
+    "type": "number",
+    "description": "Disabled controls. WCAG exempts disabled controls from contrast, but they still read as controls.",
+    "value": "0.5",
+    "css": "0.5"
+  },
+  {
+    "path": [
+      "focus-ring",
+      "width"
+    ],
+    "name": "--plinth-focus-ring-width",
+    "cssVar": "var(--plinth-focus-ring-width)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2px",
+    "ref": "ref.border-width.2",
+    "css": "var(--plinth-ref-border-width-2)"
+  },
+  {
+    "path": [
+      "focus-ring",
+      "offset"
+    ],
+    "name": "--plinth-focus-ring-offset",
+    "cssVar": "var(--plinth-focus-ring-offset)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0",
+    "css": "0"
+  },
+  {
+    "path": [
+      "focus-ring",
+      "offset-filled"
+    ],
+    "name": "--plinth-focus-ring-offset-filled",
+    "cssVar": "var(--plinth-focus-ring-offset-filled)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2px",
+    "ref": "ref.border-width.2",
+    "css": "var(--plinth-ref-border-width-2)"
+  },
+  {
+    "path": [
+      "focus-ring",
+      "offset-inset"
+    ],
+    "name": "--plinth-focus-ring-offset-inset",
+    "cssVar": "var(--plinth-focus-ring-offset-inset)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "Inside the element's edge, minus the ring's width: for full-width rows in a scrolling container, which would cut off a ring drawn outside them.",
+    "value": "-2px",
+    "css": "-2px"
+  },
+  {
+    "path": [
+      "font",
+      "family",
+      "body"
+    ],
+    "name": "--plinth-font-family-body",
+    "cssVar": "var(--plinth-font-family-body)",
+    "tier": "semantic",
+    "type": "fontFamily",
+    "value": "'Geist Variable', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "ref": "ref.font.family.sans",
+    "css": "var(--plinth-ref-font-family-sans)"
+  },
+  {
+    "path": [
+      "font",
+      "family",
+      "mono"
+    ],
+    "name": "--plinth-font-family-mono",
+    "cssVar": "var(--plinth-font-family-mono)",
+    "tier": "semantic",
+    "type": "fontFamily",
+    "value": "'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+    "ref": "ref.font.family.mono",
+    "css": "var(--plinth-ref-font-family-mono)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "xs"
+    ],
+    "name": "--plinth-font-size-xs",
+    "cssVar": "var(--plinth-font-size-xs)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.75rem",
+    "ref": "ref.font.size.12",
+    "css": "var(--plinth-ref-font-size-12)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "sm"
+    ],
+    "name": "--plinth-font-size-sm",
+    "cssVar": "var(--plinth-font-size-sm)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.8125rem",
+    "ref": "ref.font.size.13",
+    "css": "var(--plinth-ref-font-size-13)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "md"
+    ],
+    "name": "--plinth-font-size-md",
+    "cssVar": "var(--plinth-font-size-md)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.875rem",
+    "ref": "ref.font.size.14",
+    "css": "var(--plinth-ref-font-size-14)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "lg"
+    ],
+    "name": "--plinth-font-size-lg",
+    "cssVar": "var(--plinth-font-size-lg)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0.9375rem",
+    "ref": "ref.font.size.15",
+    "css": "var(--plinth-ref-font-size-15)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "xl"
+    ],
+    "name": "--plinth-font-size-xl",
+    "cssVar": "var(--plinth-font-size-xl)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.125rem",
+    "ref": "ref.font.size.18",
+    "css": "var(--plinth-ref-font-size-18)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "2xl"
+    ],
+    "name": "--plinth-font-size-2xl",
+    "cssVar": "var(--plinth-font-size-2xl)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.5rem",
+    "ref": "ref.font.size.24",
+    "css": "var(--plinth-ref-font-size-24)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "3xl"
+    ],
+    "name": "--plinth-font-size-3xl",
+    "cssVar": "var(--plinth-font-size-3xl)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.875rem",
+    "ref": "ref.font.size.30",
+    "css": "var(--plinth-ref-font-size-30)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "4xl"
+    ],
+    "name": "--plinth-font-size-4xl",
+    "cssVar": "var(--plinth-font-size-4xl)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2.25rem",
+    "ref": "ref.font.size.36",
+    "css": "var(--plinth-ref-font-size-36)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "5xl"
+    ],
+    "name": "--plinth-font-size-5xl",
+    "cssVar": "var(--plinth-font-size-5xl)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "3rem",
+    "ref": "ref.font.size.48",
+    "css": "var(--plinth-ref-font-size-48)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "6xl"
+    ],
+    "name": "--plinth-font-size-6xl",
+    "cssVar": "var(--plinth-font-size-6xl)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "4rem",
+    "ref": "ref.font.size.64",
+    "css": "var(--plinth-ref-font-size-64)"
+  },
+  {
+    "path": [
+      "font",
+      "size",
+      "field"
+    ],
+    "name": "--plinth-font-size-field",
+    "cssVar": "var(--plinth-font-size-field)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "Text typed into a field on a phone (16px): with less, iOS zooms the page in when the field takes focus. From 768px up a field uses md.",
+    "value": "1rem",
+    "ref": "ref.font.size.16",
+    "css": "var(--plinth-ref-font-size-16)"
+  },
+  {
+    "path": [
+      "font",
+      "weight",
+      "regular"
+    ],
+    "name": "--plinth-font-weight-regular",
+    "cssVar": "var(--plinth-font-weight-regular)",
+    "tier": "semantic",
+    "type": "fontWeight",
+    "value": "400",
+    "ref": "ref.font.weight.400",
+    "css": "var(--plinth-ref-font-weight-400)"
+  },
+  {
+    "path": [
+      "font",
+      "weight",
+      "medium"
+    ],
+    "name": "--plinth-font-weight-medium",
+    "cssVar": "var(--plinth-font-weight-medium)",
+    "tier": "semantic",
+    "type": "fontWeight",
+    "value": "500",
+    "ref": "ref.font.weight.500",
+    "css": "var(--plinth-ref-font-weight-500)"
+  },
+  {
+    "path": [
+      "font",
+      "weight",
+      "semibold"
+    ],
+    "name": "--plinth-font-weight-semibold",
+    "cssVar": "var(--plinth-font-weight-semibold)",
+    "tier": "semantic",
+    "type": "fontWeight",
+    "value": "600",
+    "ref": "ref.font.weight.600",
+    "css": "var(--plinth-ref-font-weight-600)"
+  },
+  {
+    "path": [
+      "font",
+      "weight",
+      "bold"
+    ],
+    "name": "--plinth-font-weight-bold",
+    "cssVar": "var(--plinth-font-weight-bold)",
+    "tier": "semantic",
+    "type": "fontWeight",
+    "value": "700",
+    "ref": "ref.font.weight.700",
+    "css": "var(--plinth-ref-font-weight-700)"
+  },
+  {
+    "path": [
+      "font",
+      "leading",
+      "display"
+    ],
+    "name": "--plinth-font-leading-display",
+    "cssVar": "var(--plinth-font-leading-display)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "1.05",
+    "ref": "ref.font.leading.105",
+    "css": "var(--plinth-ref-font-leading-105)"
+  },
+  {
+    "path": [
+      "font",
+      "leading",
+      "tight"
+    ],
+    "name": "--plinth-font-leading-tight",
+    "cssVar": "var(--plinth-font-leading-tight)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "1.25",
+    "ref": "ref.font.leading.125",
+    "css": "var(--plinth-ref-font-leading-125)"
+  },
+  {
+    "path": [
+      "font",
+      "leading",
+      "normal"
+    ],
+    "name": "--plinth-font-leading-normal",
+    "cssVar": "var(--plinth-font-leading-normal)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "1.5",
+    "ref": "ref.font.leading.150",
+    "css": "var(--plinth-ref-font-leading-150)"
+  },
+  {
+    "path": [
+      "font",
+      "tracking",
+      "normal"
+    ],
+    "name": "--plinth-font-tracking-normal",
+    "cssVar": "var(--plinth-font-tracking-normal)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "0",
+    "ref": "ref.font.tracking.0",
+    "css": "var(--plinth-ref-font-tracking-0)"
+  },
+  {
+    "path": [
+      "font",
+      "tracking",
+      "snug"
+    ],
+    "name": "--plinth-font-tracking-snug",
+    "cssVar": "var(--plinth-font-tracking-snug)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "-0.01em",
+    "ref": "ref.font.tracking.neg-1",
+    "css": "var(--plinth-ref-font-tracking-neg-1)"
+  },
+  {
+    "path": [
+      "font",
+      "tracking",
+      "tight"
+    ],
+    "name": "--plinth-font-tracking-tight",
+    "cssVar": "var(--plinth-font-tracking-tight)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "-0.02em",
+    "ref": "ref.font.tracking.neg-2",
+    "css": "var(--plinth-ref-font-tracking-neg-2)"
+  },
+  {
+    "path": [
+      "font",
+      "tracking",
+      "tighter"
+    ],
+    "name": "--plinth-font-tracking-tighter",
+    "cssVar": "var(--plinth-font-tracking-tighter)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "-0.04em",
+    "ref": "ref.font.tracking.neg-4",
+    "css": "var(--plinth-ref-font-tracking-neg-4)"
+  },
+  {
+    "path": [
+      "duration",
+      "fast"
+    ],
+    "name": "--plinth-duration-fast",
+    "cssVar": "var(--plinth-duration-fast)",
+    "tier": "semantic",
+    "type": "duration",
+    "value": "120ms",
+    "ref": "ref.duration.120",
+    "css": "var(--plinth-ref-duration-120)"
+  },
+  {
+    "path": [
+      "duration",
+      "normal"
+    ],
+    "name": "--plinth-duration-normal",
+    "cssVar": "var(--plinth-duration-normal)",
+    "tier": "semantic",
+    "type": "duration",
+    "value": "200ms",
+    "ref": "ref.duration.200",
+    "css": "var(--plinth-ref-duration-200)"
+  },
+  {
+    "path": [
+      "duration",
+      "slow"
+    ],
+    "name": "--plinth-duration-slow",
+    "cssVar": "var(--plinth-duration-slow)",
+    "tier": "semantic",
+    "type": "duration",
+    "value": "320ms",
+    "ref": "ref.duration.320",
+    "css": "var(--plinth-ref-duration-320)"
+  },
+  {
+    "path": [
+      "easing",
+      "standard"
+    ],
+    "name": "--plinth-easing-standard",
+    "cssVar": "var(--plinth-easing-standard)",
+    "tier": "semantic",
+    "type": "cubicBezier",
+    "value": "cubic-bezier(0.2, 0, 0, 1)",
+    "ref": "ref.easing.standard",
+    "css": "var(--plinth-ref-easing-standard)"
+  },
+  {
+    "path": [
+      "easing",
+      "enter"
+    ],
+    "name": "--plinth-easing-enter",
+    "cssVar": "var(--plinth-easing-enter)",
+    "tier": "semantic",
+    "type": "cubicBezier",
+    "value": "cubic-bezier(0, 0, 0, 1)",
+    "ref": "ref.easing.enter",
+    "css": "var(--plinth-ref-easing-enter)"
+  },
+  {
+    "path": [
+      "easing",
+      "exit"
+    ],
+    "name": "--plinth-easing-exit",
+    "cssVar": "var(--plinth-easing-exit)",
+    "tier": "semantic",
+    "type": "cubicBezier",
+    "value": "cubic-bezier(0.3, 0, 1, 1)",
+    "ref": "ref.easing.exit",
+    "css": "var(--plinth-ref-easing-exit)"
+  },
+  {
+    "path": [
+      "control",
+      "sm"
+    ],
+    "name": "--plinth-control-sm",
+    "cssVar": "var(--plinth-control-sm)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.75rem",
+    "ref": "ref.size.28",
+    "css": "var(--plinth-ref-size-28)"
+  },
+  {
+    "path": [
+      "control",
+      "md"
+    ],
+    "name": "--plinth-control-md",
+    "cssVar": "var(--plinth-control-md)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2rem",
+    "ref": "ref.size.32",
+    "css": "var(--plinth-ref-size-32)"
+  },
+  {
+    "path": [
+      "control",
+      "lg"
+    ],
+    "name": "--plinth-control-lg",
+    "cssVar": "var(--plinth-control-lg)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2.5rem",
+    "ref": "ref.size.40",
+    "css": "var(--plinth-ref-size-40)"
+  },
+  {
+    "path": [
+      "touch-target"
+    ],
+    "name": "--plinth-touch-target",
+    "cssVar": "var(--plinth-touch-target)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "The smallest touch target any component may have.",
+    "value": "2.5rem",
+    "ref": "ref.size.40",
+    "css": "var(--plinth-ref-size-40)"
+  },
+  {
+    "path": [
+      "size",
+      "icon",
+      "sm"
+    ],
+    "name": "--plinth-size-icon-sm",
+    "cssVar": "var(--plinth-size-icon-sm)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1rem",
+    "ref": "ref.size.16",
+    "css": "var(--plinth-ref-size-16)"
+  },
+  {
+    "path": [
+      "size",
+      "icon",
+      "md"
+    ],
+    "name": "--plinth-size-icon-md",
+    "cssVar": "var(--plinth-size-icon-md)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.25rem",
+    "ref": "ref.size.20",
+    "css": "var(--plinth-ref-size-20)"
+  },
+  {
+    "path": [
+      "size",
+      "icon",
+      "lg"
+    ],
+    "name": "--plinth-size-icon-lg",
+    "cssVar": "var(--plinth-size-icon-lg)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.5rem",
+    "ref": "ref.size.24",
+    "css": "var(--plinth-ref-size-24)"
+  },
+  {
+    "path": [
+      "size",
+      "row"
+    ],
+    "name": "--plinth-size-row",
+    "cssVar": "var(--plinth-size-row)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "The minimum height of a row in a list or sheet (44 px).",
+    "value": "2.75rem",
+    "ref": "ref.size.44",
+    "css": "var(--plinth-ref-size-44)"
+  },
+  {
+    "path": [
+      "size",
+      "avatar",
+      "sm"
+    ],
+    "name": "--plinth-size-avatar-sm",
+    "cssVar": "var(--plinth-size-avatar-sm)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1.5rem",
+    "ref": "ref.size.24",
+    "css": "var(--plinth-ref-size-24)"
+  },
+  {
+    "path": [
+      "size",
+      "avatar",
+      "md"
+    ],
+    "name": "--plinth-size-avatar-md",
+    "cssVar": "var(--plinth-size-avatar-md)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2rem",
+    "ref": "ref.size.32",
+    "css": "var(--plinth-ref-size-32)"
+  },
+  {
+    "path": [
+      "size",
+      "avatar",
+      "lg"
+    ],
+    "name": "--plinth-size-avatar-lg",
+    "cssVar": "var(--plinth-size-avatar-lg)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "2.5rem",
+    "ref": "ref.size.40",
+    "css": "var(--plinth-ref-size-40)"
+  },
+  {
+    "path": [
+      "size",
+      "avatar",
+      "xl"
+    ],
+    "name": "--plinth-size-avatar-xl",
+    "cssVar": "var(--plinth-size-avatar-xl)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "3.5rem",
+    "ref": "ref.size.56",
+    "css": "var(--plinth-ref-size-56)"
+  },
+  {
+    "path": [
+      "size",
+      "dialog"
+    ],
+    "name": "--plinth-size-dialog",
+    "cssVar": "var(--plinth-size-dialog)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "The width of a dialog (480 px).",
+    "value": "30rem",
+    "ref": "ref.size.480",
+    "css": "var(--plinth-ref-size-480)"
+  },
+  {
+    "path": [
+      "size",
+      "panel"
+    ],
+    "name": "--plinth-size-panel",
+    "cssVar": "var(--plinth-size-panel)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "The width of a side panel on a wider screen (400 px).",
+    "value": "25rem",
+    "ref": "ref.size.400",
+    "css": "var(--plinth-ref-size-400)"
+  },
+  {
+    "path": [
+      "size",
+      "peek"
+    ],
+    "name": "--plinth-size-peek",
+    "cssVar": "var(--plinth-size-peek)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "How much of a drawer shows at its peek snap point (160 px).",
+    "value": "10rem",
+    "ref": "ref.size.160",
+    "css": "var(--plinth-ref-size-160)"
+  },
+  {
+    "path": [
+      "size",
+      "menu",
+      "min"
+    ],
+    "name": "--plinth-size-menu-min",
+    "cssVar": "var(--plinth-size-menu-min)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "The least width of a menu (192 px).",
+    "value": "12rem",
+    "ref": "ref.size.192",
+    "css": "var(--plinth-ref-size-192)"
+  },
+  {
+    "path": [
+      "size",
+      "menu",
+      "max"
+    ],
+    "name": "--plinth-size-menu-max",
+    "cssVar": "var(--plinth-size-menu-max)",
+    "tier": "semantic",
+    "type": "dimension",
+    "description": "The most width of a menu (320 px); a longer label wraps.",
+    "value": "20rem",
+    "ref": "ref.size.320",
+    "css": "var(--plinth-ref-size-320)"
+  },
+  {
+    "path": [
+      "layer",
+      "base"
+    ],
+    "name": "--plinth-layer-base",
+    "cssVar": "var(--plinth-layer-base)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "0",
+    "css": "0"
+  },
+  {
+    "path": [
+      "layer",
+      "sticky"
+    ],
+    "name": "--plinth-layer-sticky",
+    "cssVar": "var(--plinth-layer-sticky)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "100",
+    "css": "100"
+  },
+  {
+    "path": [
+      "layer",
+      "overlay"
+    ],
+    "name": "--plinth-layer-overlay",
+    "cssVar": "var(--plinth-layer-overlay)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "200",
+    "css": "200"
+  },
+  {
+    "path": [
+      "layer",
+      "sheet"
+    ],
+    "name": "--plinth-layer-sheet",
+    "cssVar": "var(--plinth-layer-sheet)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "300",
+    "css": "300"
+  },
+  {
+    "path": [
+      "layer",
+      "toast"
+    ],
+    "name": "--plinth-layer-toast",
+    "cssVar": "var(--plinth-layer-toast)",
+    "tier": "semantic",
+    "type": "number",
+    "value": "400",
+    "css": "400"
+  },
+  {
+    "path": [
+      "breakpoint",
+      "md"
+    ],
+    "name": "--plinth-breakpoint-md",
+    "cssVar": "var(--plinth-breakpoint-md)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "768px",
+    "css": "768px"
+  },
+  {
+    "path": [
+      "breakpoint",
+      "lg"
+    ],
+    "name": "--plinth-breakpoint-lg",
+    "cssVar": "var(--plinth-breakpoint-lg)",
+    "tier": "semantic",
+    "type": "dimension",
+    "value": "1280px",
+    "css": "1280px"
+  },
+  {
+    "path": [
+      "color",
+      "surface"
+    ],
+    "name": "--plinth-color-surface",
+    "cssVar": "var(--plinth-color-surface)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.985 0.002 260)",
+    "dark": "oklch(0.18 0.005 260)",
+    "ref": "ref.color.neutral.50",
+    "darkRef": "ref.color.neutral.950",
+    "css": "var(--plinth-ref-color-neutral-50)",
+    "darkCss": "var(--plinth-ref-color-neutral-950)"
+  },
+  {
+    "path": [
+      "color",
+      "surface-raised"
+    ],
+    "name": "--plinth-color-surface-raised",
+    "cssVar": "var(--plinth-color-surface-raised)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(1 0 0)",
+    "dark": "oklch(0.205 0.006 260)",
+    "ref": "ref.color.neutral.0",
+    "darkRef": "ref.color.neutral.900",
+    "css": "var(--plinth-ref-color-neutral-0)",
+    "darkCss": "var(--plinth-ref-color-neutral-900)"
+  },
+  {
+    "path": [
+      "color",
+      "surface-sunken"
+    ],
+    "name": "--plinth-color-surface-sunken",
+    "cssVar": "var(--plinth-color-surface-sunken)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.965 0.003 260)",
+    "dark": "oklch(0.145 0.004 260)",
+    "ref": "ref.color.neutral.100",
+    "darkRef": "ref.color.neutral.1000",
+    "css": "var(--plinth-ref-color-neutral-100)",
+    "darkCss": "var(--plinth-ref-color-neutral-1000)"
+  },
+  {
+    "path": [
+      "color",
+      "surface-hover"
+    ],
+    "name": "--plinth-color-surface-hover",
+    "cssVar": "var(--plinth-color-surface-hover)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "A small surface step for hover, never a colour jump.",
+    "value": "oklch(0.945 0.004 260)",
+    "dark": "oklch(0.235 0.007 260)",
+    "ref": "ref.color.neutral.150",
+    "darkRef": "ref.color.neutral.850",
+    "css": "var(--plinth-ref-color-neutral-150)",
+    "darkCss": "var(--plinth-ref-color-neutral-850)"
+  },
+  {
+    "path": [
+      "color",
+      "text"
+    ],
+    "name": "--plinth-color-text",
+    "cssVar": "var(--plinth-color-text)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.18 0.005 260)",
+    "dark": "oklch(0.965 0.003 260)",
+    "ref": "ref.color.neutral.950",
+    "darkRef": "ref.color.neutral.100",
+    "css": "var(--plinth-ref-color-neutral-950)",
+    "darkCss": "var(--plinth-ref-color-neutral-100)"
+  },
+  {
+    "path": [
+      "color",
+      "text-muted"
+    ],
+    "name": "--plinth-color-text-muted",
+    "cssVar": "var(--plinth-color-text-muted)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.45 0.01 260)",
+    "dark": "oklch(0.82 0.005 260)",
+    "ref": "ref.color.neutral.600",
+    "darkRef": "ref.color.neutral.300",
+    "css": "var(--plinth-ref-color-neutral-600)",
+    "darkCss": "var(--plinth-ref-color-neutral-300)"
+  },
+  {
+    "path": [
+      "color",
+      "text-subtle"
+    ],
+    "name": "--plinth-color-text-subtle",
+    "cssVar": "var(--plinth-color-text-subtle)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "The third text level: placeholders, timestamps, disabled labels.",
+    "value": "oklch(0.54 0.01 260)",
+    "dark": "oklch(0.71 0.008 260)",
+    "ref": "ref.color.neutral.500",
+    "darkRef": "ref.color.neutral.400",
+    "css": "var(--plinth-ref-color-neutral-500)",
+    "darkCss": "var(--plinth-ref-color-neutral-400)"
+  },
+  {
+    "path": [
+      "color",
+      "border"
+    ],
+    "name": "--plinth-color-border",
+    "cssVar": "var(--plinth-color-border)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "Translucent, so it sits right on any surface.",
+    "value": "oklch(0.18 0.005 260 / 0.1)",
+    "dark": "oklch(0.965 0.003 260 / 0.1)",
+    "ref": "ref.color.ink-alpha.10",
+    "darkRef": "ref.color.chalk-alpha.10",
+    "css": "var(--plinth-ref-color-ink-alpha-10)",
+    "darkCss": "var(--plinth-ref-color-chalk-alpha-10)"
+  },
+  {
+    "path": [
+      "color",
+      "border-strong"
+    ],
+    "name": "--plinth-color-border-strong",
+    "cssVar": "var(--plinth-color-border-strong)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.18 0.005 260 / 0.2)",
+    "dark": "oklch(0.965 0.003 260 / 0.2)",
+    "ref": "ref.color.ink-alpha.20",
+    "darkRef": "ref.color.chalk-alpha.20",
+    "css": "var(--plinth-ref-color-ink-alpha-20)",
+    "darkCss": "var(--plinth-ref-color-chalk-alpha-20)"
+  },
+  {
+    "path": [
+      "color",
+      "divider"
+    ],
+    "name": "--plinth-color-divider",
+    "cssVar": "var(--plinth-color-divider)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.18 0.005 260 / 0.06)",
+    "dark": "oklch(0.965 0.003 260 / 0.06)",
+    "ref": "ref.color.ink-alpha.6",
+    "darkRef": "ref.color.chalk-alpha.6",
+    "css": "var(--plinth-ref-color-ink-alpha-6)",
+    "darkCss": "var(--plinth-ref-color-chalk-alpha-6)"
+  },
+  {
+    "path": [
+      "color",
+      "primary"
+    ],
+    "name": "--plinth-color-primary",
+    "cssVar": "var(--plinth-color-primary)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "The primary button: inverted neutral by default (ADR 3). A brand usually sets its own colour here, with primary-hover, primary-active, on-primary and primary-edge.",
+    "value": "oklch(0.18 0.005 260)",
+    "dark": "oklch(0.965 0.003 260)",
+    "ref": "ref.color.neutral.950",
+    "darkRef": "ref.color.neutral.100",
+    "css": "var(--plinth-ref-color-neutral-950)",
+    "darkCss": "var(--plinth-ref-color-neutral-100)"
+  },
+  {
+    "path": [
+      "color",
+      "primary-hover"
+    ],
+    "name": "--plinth-color-primary-hover",
+    "cssVar": "var(--plinth-color-primary-hover)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.27 0.008 260)",
+    "dark": "oklch(0.92 0.004 260)",
+    "ref": "ref.color.neutral.800",
+    "darkRef": "ref.color.neutral.200",
+    "css": "var(--plinth-ref-color-neutral-800)",
+    "darkCss": "var(--plinth-ref-color-neutral-200)"
+  },
+  {
+    "path": [
+      "color",
+      "primary-active"
+    ],
+    "name": "--plinth-color-primary-active",
+    "cssVar": "var(--plinth-color-primary-active)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(0.37 0.01 260)",
+    "dark": "oklch(0.82 0.005 260)",
+    "ref": "ref.color.neutral.700",
+    "darkRef": "ref.color.neutral.300",
+    "css": "var(--plinth-ref-color-neutral-700)",
+    "darkCss": "var(--plinth-ref-color-neutral-300)"
+  },
+  {
+    "path": [
+      "color",
+      "on-primary"
+    ],
+    "name": "--plinth-color-on-primary",
+    "cssVar": "var(--plinth-color-on-primary)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(1 0 0)",
+    "dark": "oklch(0.18 0.005 260)",
+    "ref": "ref.color.neutral.0",
+    "darkRef": "ref.color.neutral.950",
+    "css": "var(--plinth-ref-color-neutral-0)",
+    "darkCss": "var(--plinth-ref-color-neutral-950)"
+  },
+  {
+    "path": [
+      "color",
+      "primary-edge"
+    ],
+    "name": "--plinth-color-primary-edge",
+    "cssVar": "var(--plinth-color-primary-edge)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "A 1px inner edge on the primary button, instead of a shadow.",
+    "value": "#ffffff1f",
+    "dark": "#0000001a",
+    "ref": "ref.color.white-alpha.12",
+    "darkRef": "ref.color.black-alpha.10",
+    "css": "var(--plinth-ref-color-white-alpha-12)",
+    "darkCss": "var(--plinth-ref-color-black-alpha-10)"
+  },
+  {
+    "path": [
+      "color",
+      "accent"
+    ],
+    "name": "--plinth-color-accent",
+    "cssVar": "var(--plinth-color-accent)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#2563eb",
+    "dark": "#2563eb",
+    "ref": "ref.color.brand.600",
+    "darkRef": "ref.color.brand.600",
+    "css": "var(--plinth-ref-color-brand-600)",
+    "darkCss": "var(--plinth-ref-color-brand-600)"
+  },
+  {
+    "path": [
+      "color",
+      "accent-text"
+    ],
+    "name": "--plinth-color-accent-text",
+    "cssVar": "var(--plinth-color-accent-text)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#1d4ed8",
+    "dark": "#93c5fd",
+    "ref": "ref.color.brand.700",
+    "darkRef": "ref.color.brand.300",
+    "css": "var(--plinth-ref-color-brand-700)",
+    "darkCss": "var(--plinth-ref-color-brand-300)"
+  },
+  {
+    "path": [
+      "color",
+      "on-accent"
+    ],
+    "name": "--plinth-color-on-accent",
+    "cssVar": "var(--plinth-color-on-accent)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(1 0 0)",
+    "dark": "oklch(1 0 0)",
+    "ref": "ref.color.neutral.0",
+    "darkRef": "ref.color.neutral.0",
+    "css": "var(--plinth-ref-color-neutral-0)",
+    "darkCss": "var(--plinth-ref-color-neutral-0)"
+  },
+  {
+    "path": [
+      "color",
+      "focus-ring"
+    ],
+    "name": "--plinth-color-focus-ring",
+    "cssVar": "var(--plinth-color-focus-ring)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#2563eb",
+    "dark": "#93c5fd",
+    "ref": "ref.color.brand.600",
+    "darkRef": "ref.color.brand.300",
+    "css": "var(--plinth-ref-color-brand-600)",
+    "darkCss": "var(--plinth-ref-color-brand-300)"
+  },
+  {
+    "path": [
+      "color",
+      "overlay"
+    ],
+    "name": "--plinth-color-overlay",
+    "cssVar": "var(--plinth-color-overlay)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#00000080",
+    "dark": "#000000b3",
+    "ref": "ref.color.black-alpha.50",
+    "darkRef": "ref.color.black-alpha.70",
+    "css": "var(--plinth-ref-color-black-alpha-50)",
+    "darkCss": "var(--plinth-ref-color-black-alpha-70)"
+  },
+  {
+    "path": [
+      "color",
+      "info"
+    ],
+    "name": "--plinth-color-info",
+    "cssVar": "var(--plinth-color-info)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "A quiet blue for neutral information, such as an info callout. It stays blue when a project changes its accent.",
+    "value": "#2563eb",
+    "dark": "#60a5fa",
+    "ref": "ref.color.brand.600",
+    "darkRef": "ref.color.brand.400",
+    "css": "var(--plinth-ref-color-brand-600)",
+    "darkCss": "var(--plinth-ref-color-brand-400)"
+  },
+  {
+    "path": [
+      "color",
+      "info-surface"
+    ],
+    "name": "--plinth-color-info-surface",
+    "cssVar": "var(--plinth-color-info-surface)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#dbeafe",
+    "dark": "#172554",
+    "ref": "ref.color.brand.100",
+    "darkRef": "ref.color.brand.950",
+    "css": "var(--plinth-ref-color-brand-100)",
+    "darkCss": "var(--plinth-ref-color-brand-950)"
+  },
+  {
+    "path": [
+      "color",
+      "info-text"
+    ],
+    "name": "--plinth-color-info-text",
+    "cssVar": "var(--plinth-color-info-text)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#1e40af",
+    "dark": "#bfdbfe",
+    "ref": "ref.color.brand.800",
+    "darkRef": "ref.color.brand.200",
+    "css": "var(--plinth-ref-color-brand-800)",
+    "darkCss": "var(--plinth-ref-color-brand-200)"
+  },
+  {
+    "path": [
+      "color",
+      "success"
+    ],
+    "name": "--plinth-color-success",
+    "cssVar": "var(--plinth-color-success)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#16a34a",
+    "dark": "#4ade80",
+    "ref": "ref.color.green.600",
+    "darkRef": "ref.color.green.400",
+    "css": "var(--plinth-ref-color-green-600)",
+    "darkCss": "var(--plinth-ref-color-green-400)"
+  },
+  {
+    "path": [
+      "color",
+      "success-surface"
+    ],
+    "name": "--plinth-color-success-surface",
+    "cssVar": "var(--plinth-color-success-surface)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#dcfce7",
+    "dark": "#052e16",
+    "ref": "ref.color.green.100",
+    "darkRef": "ref.color.green.950",
+    "css": "var(--plinth-ref-color-green-100)",
+    "darkCss": "var(--plinth-ref-color-green-950)"
+  },
+  {
+    "path": [
+      "color",
+      "success-text"
+    ],
+    "name": "--plinth-color-success-text",
+    "cssVar": "var(--plinth-color-success-text)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#166534",
+    "dark": "#bbf7d0",
+    "ref": "ref.color.green.800",
+    "darkRef": "ref.color.green.200",
+    "css": "var(--plinth-ref-color-green-800)",
+    "darkCss": "var(--plinth-ref-color-green-200)"
+  },
+  {
+    "path": [
+      "color",
+      "warning"
+    ],
+    "name": "--plinth-color-warning",
+    "cssVar": "var(--plinth-color-warning)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#f59e0b",
+    "dark": "#fbbf24",
+    "ref": "ref.color.amber.500",
+    "darkRef": "ref.color.amber.400",
+    "css": "var(--plinth-ref-color-amber-500)",
+    "darkCss": "var(--plinth-ref-color-amber-400)"
+  },
+  {
+    "path": [
+      "color",
+      "warning-surface"
+    ],
+    "name": "--plinth-color-warning-surface",
+    "cssVar": "var(--plinth-color-warning-surface)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#fef3c7",
+    "dark": "#451a03",
+    "ref": "ref.color.amber.100",
+    "darkRef": "ref.color.amber.950",
+    "css": "var(--plinth-ref-color-amber-100)",
+    "darkCss": "var(--plinth-ref-color-amber-950)"
+  },
+  {
+    "path": [
+      "color",
+      "warning-text"
+    ],
+    "name": "--plinth-color-warning-text",
+    "cssVar": "var(--plinth-color-warning-text)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#92400e",
+    "dark": "#fde68a",
+    "ref": "ref.color.amber.800",
+    "darkRef": "ref.color.amber.200",
+    "css": "var(--plinth-ref-color-amber-800)",
+    "darkCss": "var(--plinth-ref-color-amber-200)"
+  },
+  {
+    "path": [
+      "color",
+      "danger"
+    ],
+    "name": "--plinth-color-danger",
+    "cssVar": "var(--plinth-color-danger)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#dc2626",
+    "dark": "#f87171",
+    "ref": "ref.color.red.600",
+    "darkRef": "ref.color.red.400",
+    "css": "var(--plinth-ref-color-red-600)",
+    "darkCss": "var(--plinth-ref-color-red-400)"
+  },
+  {
+    "path": [
+      "color",
+      "danger-surface"
+    ],
+    "name": "--plinth-color-danger-surface",
+    "cssVar": "var(--plinth-color-danger-surface)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#fee2e2",
+    "dark": "#450a0a",
+    "ref": "ref.color.red.100",
+    "darkRef": "ref.color.red.950",
+    "css": "var(--plinth-ref-color-red-100)",
+    "darkCss": "var(--plinth-ref-color-red-950)"
+  },
+  {
+    "path": [
+      "color",
+      "danger-text"
+    ],
+    "name": "--plinth-color-danger-text",
+    "cssVar": "var(--plinth-color-danger-text)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#991b1b",
+    "dark": "#fecaca",
+    "ref": "ref.color.red.800",
+    "darkRef": "ref.color.red.200",
+    "css": "var(--plinth-ref-color-red-800)",
+    "darkCss": "var(--plinth-ref-color-red-200)"
+  },
+  {
+    "path": [
+      "color",
+      "accent-hover"
+    ],
+    "name": "--plinth-color-accent-hover",
+    "cssVar": "var(--plinth-color-accent-hover)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "Override together with accent: a project that changes accent must change this too, or its buttons turn Plinth's blue on hover and press.",
+    "value": "#1d4ed8",
+    "dark": "#1d4ed8",
+    "ref": "ref.color.brand.700",
+    "darkRef": "ref.color.brand.700",
+    "css": "var(--plinth-ref-color-brand-700)",
+    "darkCss": "var(--plinth-ref-color-brand-700)"
+  },
+  {
+    "path": [
+      "color",
+      "accent-active"
+    ],
+    "name": "--plinth-color-accent-active",
+    "cssVar": "var(--plinth-color-accent-active)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "Override together with accent: a project that changes accent must change this too, or its buttons turn Plinth's blue on hover and press.",
+    "value": "#1e40af",
+    "dark": "#1e40af",
+    "ref": "ref.color.brand.800",
+    "darkRef": "ref.color.brand.800",
+    "css": "var(--plinth-ref-color-brand-800)",
+    "darkCss": "var(--plinth-ref-color-brand-800)"
+  },
+  {
+    "path": [
+      "color",
+      "danger-solid"
+    ],
+    "name": "--plinth-color-danger-solid",
+    "cssVar": "var(--plinth-color-danger-solid)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#dc2626",
+    "dark": "#dc2626",
+    "ref": "ref.color.red.600",
+    "darkRef": "ref.color.red.600",
+    "css": "var(--plinth-ref-color-red-600)",
+    "darkCss": "var(--plinth-ref-color-red-600)"
+  },
+  {
+    "path": [
+      "color",
+      "danger-solid-hover"
+    ],
+    "name": "--plinth-color-danger-solid-hover",
+    "cssVar": "var(--plinth-color-danger-solid-hover)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#b91c1c",
+    "dark": "#b91c1c",
+    "ref": "ref.color.red.700",
+    "darkRef": "ref.color.red.700",
+    "css": "var(--plinth-ref-color-red-700)",
+    "darkCss": "var(--plinth-ref-color-red-700)"
+  },
+  {
+    "path": [
+      "color",
+      "danger-solid-active"
+    ],
+    "name": "--plinth-color-danger-solid-active",
+    "cssVar": "var(--plinth-color-danger-solid-active)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "#991b1b",
+    "dark": "#991b1b",
+    "ref": "ref.color.red.800",
+    "darkRef": "ref.color.red.800",
+    "css": "var(--plinth-ref-color-red-800)",
+    "darkCss": "var(--plinth-ref-color-red-800)"
+  },
+  {
+    "path": [
+      "color",
+      "on-danger"
+    ],
+    "name": "--plinth-color-on-danger",
+    "cssVar": "var(--plinth-color-on-danger)",
+    "tier": "semantic",
+    "type": "color",
+    "value": "oklch(1 0 0)",
+    "dark": "oklch(1 0 0)",
+    "ref": "ref.color.neutral.0",
+    "darkRef": "ref.color.neutral.0",
+    "css": "var(--plinth-ref-color-neutral-0)",
+    "darkCss": "var(--plinth-ref-color-neutral-0)"
+  },
+  {
+    "path": [
+      "color",
+      "accent-subtle"
+    ],
+    "name": "--plinth-color-accent-subtle",
+    "cssVar": "var(--plinth-color-accent-subtle)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "A tinted surface for selected states, such as the active nav item, with accent-text on it.",
+    "value": "#eff6ff",
+    "dark": "#172554",
+    "ref": "ref.color.brand.50",
+    "darkRef": "ref.color.brand.950",
+    "css": "var(--plinth-ref-color-brand-50)",
+    "darkCss": "var(--plinth-ref-color-brand-950)"
+  },
+  {
+    "path": [
+      "color",
+      "accent-subtle-hover"
+    ],
+    "name": "--plinth-color-accent-subtle-hover",
+    "cssVar": "var(--plinth-color-accent-subtle-hover)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "The selection tint under the pointer, on a pressed button that can be pressed again. Override together with accent-subtle.",
+    "value": "#dbeafe",
+    "dark": "#1e3a8a",
+    "ref": "ref.color.brand.100",
+    "darkRef": "ref.color.brand.900",
+    "css": "var(--plinth-ref-color-brand-100)",
+    "darkCss": "var(--plinth-ref-color-brand-900)"
+  },
+  {
+    "path": [
+      "color",
+      "accent-subtle-active"
+    ],
+    "name": "--plinth-color-accent-subtle-active",
+    "cssVar": "var(--plinth-color-accent-subtle-active)",
+    "tier": "semantic",
+    "type": "color",
+    "description": "The selection tint while a pressed button is being pressed. Override together with accent-subtle.",
+    "value": "#bfdbfe",
+    "dark": "#1e40af",
+    "ref": "ref.color.brand.200",
+    "darkRef": "ref.color.brand.800",
+    "css": "var(--plinth-ref-color-brand-200)",
+    "darkCss": "var(--plinth-ref-color-brand-800)"
+  },
+  {
+    "path": [
+      "elevation",
+      "1"
+    ],
+    "name": "--plinth-elevation-1",
+    "cssVar": "var(--plinth-elevation-1)",
+    "tier": "semantic",
+    "type": "shadow",
+    "value": "0 1px 2px 0 #0000001a",
+    "dark": "0 1px 2px 0 #0000004d",
+    "css": "0 1px 2px 0 #0000001a",
+    "darkCss": "0 1px 2px 0 #0000004d"
+  },
+  {
+    "path": [
+      "elevation",
+      "2"
+    ],
+    "name": "--plinth-elevation-2",
+    "cssVar": "var(--plinth-elevation-2)",
+    "tier": "semantic",
+    "type": "shadow",
+    "value": "0 4px 12px 0 #00000026",
+    "dark": "0 4px 12px 0 #00000080",
+    "css": "0 4px 12px 0 #00000026",
+    "darkCss": "0 4px 12px 0 #00000080"
+  },
+  {
+    "path": [
+      "elevation",
+      "3"
+    ],
+    "name": "--plinth-elevation-3",
+    "cssVar": "var(--plinth-elevation-3)",
+    "tier": "semantic",
+    "type": "shadow",
+    "value": "0 12px 32px 0 #00000026",
+    "dark": "0 12px 32px 0 #00000099",
+    "css": "0 12px 32px 0 #00000026",
+    "darkCss": "0 12px 32px 0 #00000099"
+  },
+  {
+    "path": [
+      "page-header",
+      "height"
+    ],
+    "name": "--plinth-page-header-height",
+    "cssVar": "var(--plinth-page-header-height)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "The page header's height, without the safe area it adds as the screen's top bar.",
+    "value": "3.5rem",
+    "ref": "space.14",
+    "css": "var(--plinth-space-14)"
+  },
+  {
+    "path": [
+      "page-header",
+      "offset"
+    ],
+    "name": "--plinth-page-header-offset",
+    "cssVar": "var(--plinth-page-header-offset)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "Where the page header sticks: 0, or an app bar's height when the page header sits under one.",
+    "value": "0",
+    "ref": "space.0",
+    "css": "var(--plinth-space-0)"
+  },
+  {
+    "path": [
+      "data-table",
+      "row-height"
+    ],
+    "name": "--plinth-data-table-row-height",
+    "cssVar": "var(--plinth-data-table-row-height)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "A body row's height in the table layout, from 768 px up (44px).",
+    "value": "2.75rem",
+    "ref": "size.row",
+    "css": "var(--plinth-size-row)"
+  },
+  {
+    "path": [
+      "list-row",
+      "height"
+    ],
+    "name": "--plinth-list-row-height",
+    "cssVar": "var(--plinth-list-row-height)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "The list row's minimum height; a row with a description grows past it.",
+    "value": "2.75rem",
+    "ref": "size.row",
+    "css": "var(--plinth-size-row)"
+  },
+  {
+    "path": [
+      "pill",
+      "height"
+    ],
+    "name": "--plinth-pill-height",
+    "cssVar": "var(--plinth-pill-height)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "A pill's height; on a touch screen it keeps a 40px hit area.",
+    "value": "2rem",
+    "ref": "control.md",
+    "css": "var(--plinth-control-md)"
+  },
+  {
+    "path": [
+      "dialog",
+      "width"
+    ],
+    "name": "--plinth-dialog-width",
+    "cssVar": "var(--plinth-dialog-width)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "A dialog's width; on a phone it is the screen's width less a margin, or the screen's as a bottom sheet.",
+    "value": "30rem",
+    "ref": "size.dialog",
+    "css": "var(--plinth-size-dialog)"
+  },
+  {
+    "path": [
+      "sheet",
+      "side-width"
+    ],
+    "name": "--plinth-sheet-side-width",
+    "cssVar": "var(--plinth-sheet-side-width)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "The width of a sheet on the start or end side, at most the screen's width less a gap.",
+    "value": "25rem",
+    "ref": "size.panel",
+    "css": "var(--plinth-size-panel)"
+  },
+  {
+    "path": [
+      "drawer",
+      "peek-height"
+    ],
+    "name": "--plinth-drawer-peek-height",
+    "cssVar": "var(--plinth-drawer-peek-height)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "How much of a drawer shows at its peek snap point on a phone: the handle, the header and the top of the body.",
+    "value": "10rem",
+    "ref": "size.peek",
+    "css": "var(--plinth-size-peek)"
+  },
+  {
+    "path": [
+      "section-menu",
+      "height"
+    ],
+    "name": "--plinth-section-menu-height",
+    "cssVar": "var(--plinth-section-menu-height)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "The section menu's row height (56px).",
+    "value": "3.5rem",
+    "ref": "space.14",
+    "css": "var(--plinth-space-14)"
+  },
+  {
+    "path": [
+      "section-menu",
+      "item-height"
+    ],
+    "name": "--plinth-section-menu-item-height",
+    "cssVar": "var(--plinth-section-menu-item-height)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "An item's height (40px), its touch target too.",
+    "value": "2.5rem",
+    "ref": "control.lg",
+    "css": "var(--plinth-control-lg)"
+  },
+  {
+    "path": [
+      "menu",
+      "min-width"
+    ],
+    "name": "--plinth-menu-min-width",
+    "cssVar": "var(--plinth-menu-min-width)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "A menu's least width (192px); it grows with its longest item.",
+    "value": "12rem",
+    "ref": "size.menu.min",
+    "css": "var(--plinth-size-menu-min)"
+  },
+  {
+    "path": [
+      "menu",
+      "max-width"
+    ],
+    "name": "--plinth-menu-max-width",
+    "cssVar": "var(--plinth-menu-max-width)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "A menu's most width (320px), and never more than the screen less a margin.",
+    "value": "20rem",
+    "ref": "size.menu.max",
+    "css": "var(--plinth-size-menu-max)"
+  },
+  {
+    "path": [
+      "text-field",
+      "trailing-size"
+    ],
+    "name": "--plinth-text-field-trailing-size",
+    "cssVar": "var(--plinth-text-field-trailing-size)",
+    "tier": "component",
+    "type": "dimension",
+    "description": "The room a text field keeps at its end for its trailing slot (32px): a small icon button or a short keyboard hint. A project with a wider hint raises it.",
+    "value": "2rem",
+    "ref": "control.md",
+    "css": "var(--plinth-control-md)"
+  },
+  {
+    "path": [
+      "callout",
+      "neutral-surface"
+    ],
+    "name": "--plinth-callout-neutral-surface",
+    "cssVar": "var(--plinth-callout-neutral-surface)",
+    "tier": "component",
+    "type": "color",
+    "description": "A neutral callout's background.",
+    "value": "oklch(0.965 0.003 260)",
+    "dark": "oklch(0.145 0.004 260)",
+    "ref": "color.surface-sunken",
+    "darkRef": "color.surface-sunken",
+    "css": "var(--plinth-color-surface-sunken)",
+    "darkCss": "var(--plinth-color-surface-sunken)"
+  },
+  {
+    "path": [
+      "callout",
+      "neutral-border"
+    ],
+    "name": "--plinth-callout-neutral-border",
+    "cssVar": "var(--plinth-callout-neutral-border)",
+    "tier": "component",
+    "type": "color",
+    "description": "A neutral callout's hairline border.",
+    "value": "oklch(0.18 0.005 260 / 0.1)",
+    "dark": "oklch(0.965 0.003 260 / 0.1)",
+    "ref": "color.border",
+    "darkRef": "color.border",
+    "css": "var(--plinth-color-border)",
+    "darkCss": "var(--plinth-color-border)"
+  },
+  {
+    "path": [
+      "callout",
+      "info-surface"
+    ],
+    "name": "--plinth-callout-info-surface",
+    "cssVar": "var(--plinth-callout-info-surface)",
+    "tier": "component",
+    "type": "color",
+    "description": "A faint, translucent info tint, so a full-width callout stays quiet on any surface.",
+    "value": "color-mix(in srgb, #2563eb 6%, transparent)",
+    "dark": "color-mix(in srgb, #60a5fa 8%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-info) 6%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-info) 8%, transparent)"
+  },
+  {
+    "path": [
+      "callout",
+      "info-border"
+    ],
+    "name": "--plinth-callout-info-border",
+    "cssVar": "var(--plinth-callout-info-border)",
+    "tier": "component",
+    "type": "color",
+    "description": "A translucent info hairline around the callout.",
+    "value": "color-mix(in srgb, #2563eb 24%, transparent)",
+    "dark": "color-mix(in srgb, #60a5fa 24%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-info) 24%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-info) 24%, transparent)"
+  },
+  {
+    "path": [
+      "callout",
+      "success-surface"
+    ],
+    "name": "--plinth-callout-success-surface",
+    "cssVar": "var(--plinth-callout-success-surface)",
+    "tier": "component",
+    "type": "color",
+    "description": "A faint, translucent success tint, so a full-width callout stays quiet on any surface.",
+    "value": "color-mix(in srgb, #16a34a 6%, transparent)",
+    "dark": "color-mix(in srgb, #4ade80 8%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-success) 6%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-success) 8%, transparent)"
+  },
+  {
+    "path": [
+      "callout",
+      "success-border"
+    ],
+    "name": "--plinth-callout-success-border",
+    "cssVar": "var(--plinth-callout-success-border)",
+    "tier": "component",
+    "type": "color",
+    "description": "A translucent success hairline around the callout.",
+    "value": "color-mix(in srgb, #16a34a 24%, transparent)",
+    "dark": "color-mix(in srgb, #4ade80 24%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-success) 24%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-success) 24%, transparent)"
+  },
+  {
+    "path": [
+      "callout",
+      "warning-surface"
+    ],
+    "name": "--plinth-callout-warning-surface",
+    "cssVar": "var(--plinth-callout-warning-surface)",
+    "tier": "component",
+    "type": "color",
+    "description": "A faint, translucent warning tint, so a full-width callout stays quiet on any surface.",
+    "value": "color-mix(in srgb, #f59e0b 6%, transparent)",
+    "dark": "color-mix(in srgb, #fbbf24 8%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-warning) 6%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-warning) 8%, transparent)"
+  },
+  {
+    "path": [
+      "callout",
+      "warning-border"
+    ],
+    "name": "--plinth-callout-warning-border",
+    "cssVar": "var(--plinth-callout-warning-border)",
+    "tier": "component",
+    "type": "color",
+    "description": "A translucent warning hairline around the callout.",
+    "value": "color-mix(in srgb, #f59e0b 24%, transparent)",
+    "dark": "color-mix(in srgb, #fbbf24 24%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-warning) 24%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-warning) 24%, transparent)"
+  },
+  {
+    "path": [
+      "callout",
+      "danger-surface"
+    ],
+    "name": "--plinth-callout-danger-surface",
+    "cssVar": "var(--plinth-callout-danger-surface)",
+    "tier": "component",
+    "type": "color",
+    "description": "A faint, translucent danger tint, so a full-width callout stays quiet on any surface.",
+    "value": "color-mix(in srgb, #dc2626 6%, transparent)",
+    "dark": "color-mix(in srgb, #f87171 8%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-danger) 6%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-danger) 8%, transparent)"
+  },
+  {
+    "path": [
+      "callout",
+      "danger-border"
+    ],
+    "name": "--plinth-callout-danger-border",
+    "cssVar": "var(--plinth-callout-danger-border)",
+    "tier": "component",
+    "type": "color",
+    "description": "A translucent danger hairline around the callout.",
+    "value": "color-mix(in srgb, #dc2626 24%, transparent)",
+    "dark": "color-mix(in srgb, #f87171 24%, transparent)",
+    "css": "color-mix(in srgb, var(--plinth-color-danger) 24%, transparent)",
+    "darkCss": "color-mix(in srgb, var(--plinth-color-danger) 24%, transparent)"
+  }
+];
+
+/** The semantic and component tokens as var()s, so a project's overrides still apply. */
+export const vars = {
+  "space": {
+    "0": "var(--plinth-space-0)",
+    "1": "var(--plinth-space-1)",
+    "2": "var(--plinth-space-2)",
+    "3": "var(--plinth-space-3)",
+    "4": "var(--plinth-space-4)",
+    "5": "var(--plinth-space-5)",
+    "6": "var(--plinth-space-6)",
+    "8": "var(--plinth-space-8)",
+    "10": "var(--plinth-space-10)",
+    "12": "var(--plinth-space-12)",
+    "14": "var(--plinth-space-14)",
+    "16": "var(--plinth-space-16)",
+    "0-5": "var(--plinth-space-0-5)"
+  },
+  "radius": {
+    "control": "var(--plinth-radius-control)",
+    "container": "var(--plinth-radius-container)",
+    "pill": "var(--plinth-radius-pill)"
+  },
+  "border-width": {
+    "thin": "var(--plinth-border-width-thin)",
+    "thick": "var(--plinth-border-width-thick)"
+  },
+  "opacity": {
+    "disabled": "var(--plinth-opacity-disabled)"
+  },
+  "focus-ring": {
+    "width": "var(--plinth-focus-ring-width)",
+    "offset": "var(--plinth-focus-ring-offset)",
+    "offset-filled": "var(--plinth-focus-ring-offset-filled)",
+    "offset-inset": "var(--plinth-focus-ring-offset-inset)"
+  },
+  "font": {
+    "family": {
+      "body": "var(--plinth-font-family-body)",
+      "mono": "var(--plinth-font-family-mono)"
+    },
+    "size": {
+      "xs": "var(--plinth-font-size-xs)",
+      "sm": "var(--plinth-font-size-sm)",
+      "md": "var(--plinth-font-size-md)",
+      "lg": "var(--plinth-font-size-lg)",
+      "xl": "var(--plinth-font-size-xl)",
+      "2xl": "var(--plinth-font-size-2xl)",
+      "3xl": "var(--plinth-font-size-3xl)",
+      "4xl": "var(--plinth-font-size-4xl)",
+      "5xl": "var(--plinth-font-size-5xl)",
+      "6xl": "var(--plinth-font-size-6xl)",
+      "field": "var(--plinth-font-size-field)"
+    },
+    "weight": {
+      "regular": "var(--plinth-font-weight-regular)",
+      "medium": "var(--plinth-font-weight-medium)",
+      "semibold": "var(--plinth-font-weight-semibold)",
+      "bold": "var(--plinth-font-weight-bold)"
+    },
+    "leading": {
+      "display": "var(--plinth-font-leading-display)",
+      "tight": "var(--plinth-font-leading-tight)",
+      "normal": "var(--plinth-font-leading-normal)"
+    },
+    "tracking": {
+      "normal": "var(--plinth-font-tracking-normal)",
+      "snug": "var(--plinth-font-tracking-snug)",
+      "tight": "var(--plinth-font-tracking-tight)",
+      "tighter": "var(--plinth-font-tracking-tighter)"
+    }
+  },
+  "duration": {
+    "fast": "var(--plinth-duration-fast)",
+    "normal": "var(--plinth-duration-normal)",
+    "slow": "var(--plinth-duration-slow)"
+  },
+  "easing": {
+    "standard": "var(--plinth-easing-standard)",
+    "enter": "var(--plinth-easing-enter)",
+    "exit": "var(--plinth-easing-exit)"
+  },
+  "control": {
+    "sm": "var(--plinth-control-sm)",
+    "md": "var(--plinth-control-md)",
+    "lg": "var(--plinth-control-lg)"
+  },
+  "touch-target": "var(--plinth-touch-target)",
+  "size": {
+    "icon": {
+      "sm": "var(--plinth-size-icon-sm)",
+      "md": "var(--plinth-size-icon-md)",
+      "lg": "var(--plinth-size-icon-lg)"
+    },
+    "row": "var(--plinth-size-row)",
+    "avatar": {
+      "sm": "var(--plinth-size-avatar-sm)",
+      "md": "var(--plinth-size-avatar-md)",
+      "lg": "var(--plinth-size-avatar-lg)",
+      "xl": "var(--plinth-size-avatar-xl)"
+    },
+    "dialog": "var(--plinth-size-dialog)",
+    "panel": "var(--plinth-size-panel)",
+    "peek": "var(--plinth-size-peek)",
+    "menu": {
+      "min": "var(--plinth-size-menu-min)",
+      "max": "var(--plinth-size-menu-max)"
+    }
+  },
+  "layer": {
+    "base": "var(--plinth-layer-base)",
+    "sticky": "var(--plinth-layer-sticky)",
+    "overlay": "var(--plinth-layer-overlay)",
+    "sheet": "var(--plinth-layer-sheet)",
+    "toast": "var(--plinth-layer-toast)"
+  },
+  "breakpoint": {
+    "md": "var(--plinth-breakpoint-md)",
+    "lg": "var(--plinth-breakpoint-lg)"
+  },
+  "color": {
+    "surface": "var(--plinth-color-surface)",
+    "surface-raised": "var(--plinth-color-surface-raised)",
+    "surface-sunken": "var(--plinth-color-surface-sunken)",
+    "surface-hover": "var(--plinth-color-surface-hover)",
+    "text": "var(--plinth-color-text)",
+    "text-muted": "var(--plinth-color-text-muted)",
+    "text-subtle": "var(--plinth-color-text-subtle)",
+    "border": "var(--plinth-color-border)",
+    "border-strong": "var(--plinth-color-border-strong)",
+    "divider": "var(--plinth-color-divider)",
+    "primary": "var(--plinth-color-primary)",
+    "primary-hover": "var(--plinth-color-primary-hover)",
+    "primary-active": "var(--plinth-color-primary-active)",
+    "on-primary": "var(--plinth-color-on-primary)",
+    "primary-edge": "var(--plinth-color-primary-edge)",
+    "accent": "var(--plinth-color-accent)",
+    "accent-text": "var(--plinth-color-accent-text)",
+    "on-accent": "var(--plinth-color-on-accent)",
+    "focus-ring": "var(--plinth-color-focus-ring)",
+    "overlay": "var(--plinth-color-overlay)",
+    "info": "var(--plinth-color-info)",
+    "info-surface": "var(--plinth-color-info-surface)",
+    "info-text": "var(--plinth-color-info-text)",
+    "success": "var(--plinth-color-success)",
+    "success-surface": "var(--plinth-color-success-surface)",
+    "success-text": "var(--plinth-color-success-text)",
+    "warning": "var(--plinth-color-warning)",
+    "warning-surface": "var(--plinth-color-warning-surface)",
+    "warning-text": "var(--plinth-color-warning-text)",
+    "danger": "var(--plinth-color-danger)",
+    "danger-surface": "var(--plinth-color-danger-surface)",
+    "danger-text": "var(--plinth-color-danger-text)",
+    "accent-hover": "var(--plinth-color-accent-hover)",
+    "accent-active": "var(--plinth-color-accent-active)",
+    "danger-solid": "var(--plinth-color-danger-solid)",
+    "danger-solid-hover": "var(--plinth-color-danger-solid-hover)",
+    "danger-solid-active": "var(--plinth-color-danger-solid-active)",
+    "on-danger": "var(--plinth-color-on-danger)",
+    "accent-subtle": "var(--plinth-color-accent-subtle)",
+    "accent-subtle-hover": "var(--plinth-color-accent-subtle-hover)",
+    "accent-subtle-active": "var(--plinth-color-accent-subtle-active)"
+  },
+  "elevation": {
+    "1": "var(--plinth-elevation-1)",
+    "2": "var(--plinth-elevation-2)",
+    "3": "var(--plinth-elevation-3)"
+  },
+  "page-header": {
+    "height": "var(--plinth-page-header-height)",
+    "offset": "var(--plinth-page-header-offset)"
+  },
+  "data-table": {
+    "row-height": "var(--plinth-data-table-row-height)"
+  },
+  "list-row": {
+    "height": "var(--plinth-list-row-height)"
+  },
+  "pill": {
+    "height": "var(--plinth-pill-height)"
+  },
+  "dialog": {
+    "width": "var(--plinth-dialog-width)"
+  },
+  "sheet": {
+    "side-width": "var(--plinth-sheet-side-width)"
+  },
+  "drawer": {
+    "peek-height": "var(--plinth-drawer-peek-height)"
+  },
+  "section-menu": {
+    "height": "var(--plinth-section-menu-height)",
+    "item-height": "var(--plinth-section-menu-item-height)"
+  },
+  "menu": {
+    "min-width": "var(--plinth-menu-min-width)",
+    "max-width": "var(--plinth-menu-max-width)"
+  },
+  "text-field": {
+    "trailing-size": "var(--plinth-text-field-trailing-size)"
+  },
+  "callout": {
+    "neutral-surface": "var(--plinth-callout-neutral-surface)",
+    "neutral-border": "var(--plinth-callout-neutral-border)",
+    "info-surface": "var(--plinth-callout-info-surface)",
+    "info-border": "var(--plinth-callout-info-border)",
+    "success-surface": "var(--plinth-callout-success-surface)",
+    "success-border": "var(--plinth-callout-success-border)",
+    "warning-surface": "var(--plinth-callout-warning-surface)",
+    "warning-border": "var(--plinth-callout-warning-border)",
+    "danger-surface": "var(--plinth-callout-danger-surface)",
+    "danger-border": "var(--plinth-callout-danger-border)"
+  }
+};