{
  "$schema": "../scripts/tokens/schema.json",
  "version": "2.1.0",
  "modes": ["light", "dark"],
  "baseFontPx": 16,
  "sources": {
    "colour": "tokens/tokens.json; app frontend/src/index.css (read 2026-11-13)",
    "geometry": "docs/ui-brand-spec.md E; app frontend/tailwind.config.ts and src/styles/{chrome,components,responsive,buttons}.css",
    "typography": "docs/ui-brand-spec.md D.3; app frontend/tailwind.config.ts and src/styles/chrome.css",
    "motion": "tokens/tokens.json motion; docs/motion.md",
    "layers": "app src/styles/responsive.css; components/shell/{AppShell,BottomTabs,Disclosure}.tsx; components/ui/{Modal,DetailDrawer,ToastHost}.tsx"
  },
  "spacing": [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64],
  "radius": {"none": 0, "sm": 6, "base": 8, "md": 10, "lg": 12, "xl": 16, "2xl": 20, "full": 9999},
  "borderWidth": {"none": 0, "hairline": 1, "strong": 2, "casing": 4},
  "breakpoint": {"sm": 640, "md": 768, "lg": 1024, "xl": 1280, "2xl": 1536, "wide": 1680},
  "layer": {"base": 0, "local": 1, "raised": 2, "sticky": 10, "fixed": 20, "navigation": 30, "popover": 40, "overlay": 50, "critical": 60},
  "opacity": {"hidden": 0, "shadow-near": 0.06, "shadow-far": 0.1, "scrim-light": 0.3, "scrim-medium": 0.35, "scrim-default": 0.4, "drag": 0.6, "scrim-strong": 0.7, "decoration": 0.8, "solid": 1},
  "size": {"control": 44, "row-list": 56, "row-table": 48, "sidebar": 256, "sidebar-app": 264, "bottom-tabs": 64},
  "type": {
    "display": [72, 76, "display", 800, -0.02],
    "display-sub": [32, 38, "sans", 400, 0],
    "heading": [48, 52, "display", 800, -0.015],
    "page": [32, 38, "sans", 600, -0.01],
    "panel": [20, 28, "sans", 600, -0.005],
    "section": [16, 24, "sans", 600, 0],
    "stat": [32, 38, "sans", 600, -0.01],
    "date": [20, 24, "sans", 600, 0],
    "body": [16, 24, "sans", 400, 0],
    "label": [14, 20, "sans", 500, 0],
    "button": [14, 20, "sans", 600, 0],
    "caption": [12, 16, "sans", 500, 0.01],
    "eyebrow": [12, 16, "sans", 600, 0.08],
    "accent": [48, 56, "accent", 500, -0.01],
    "display-mobile": [44, 48, "display", 800, -0.02],
    "display-sub-mobile": [24, 30, "sans", 400, 0],
    "heading-mobile": [34, 40, "display", 800, -0.015],
    "page-mobile": [26, 32, "sans", 600, -0.01],
    "accent-mobile": [32, 40, "accent", 500, -0.01]
  },
  "aliases": {
    "semantic.color.boundary-strong": {"light": "semantic.color.muted", "dark": "semantic.color.outline", "purpose": "Essential control boundary across neutral default, hover and pressed surfaces", "use": "Inputs, checkbox outlines and essential separators", "avoid": "Decorative dividers; use line there", "partner": "bg, surface, panel, hover, line"},
    "semantic.color.state-indicator": {"light": "semantic.color.accent-ink", "dark": "semantic.color.accent-ink", "purpose": "Essential selected-state mark", "use": "Tab underline, selected icon or short state stroke on neutral surfaces", "avoid": "Text on a filled accent button; use on-accent", "partner": "bg, surface, panel, hover"},
    "semantic.color.sidebar-ink": {"light": "semantic.color.ink", "dark": "semantic.color.ink", "purpose": "Sidebar text", "use": "Neutral sidebar and hover rows", "avoid": "Selected teal row; use on-accent", "partner": "sidebar, sidebar-hover"},
    "semantic.color.shadow": {"light": "primitive.color.hex142c2a", "dark": "primitive.color.hex000000", "purpose": "Overlay shadow pigment", "use": "Only the two overlay shadow layers", "avoid": "Text, borders or flat cards", "partner": "panel"},
    "semantic.space.page-phone": {"ref": "primitive.spacing.16", "purpose": "Phone page gutter"},
    "semantic.space.page-tablet": {"ref": "primitive.spacing.24", "purpose": "Tablet page gutter"},
    "semantic.space.page-desktop": {"ref": "primitive.spacing.32", "purpose": "Desktop page gutter"},
    "semantic.space.card": {"ref": "primitive.spacing.20", "purpose": "Default card padding"},
    "semantic.space.settings": {"ref": "primitive.spacing.24", "purpose": "Settings card padding"},
    "semantic.space.control-x": {"ref": "primitive.spacing.12", "purpose": "Control inline padding"},
    "semantic.space.control-y": {"ref": "primitive.spacing.8", "purpose": "Control block padding"},
    "semantic.radius.control": {"ref": "primitive.radius.md", "purpose": "Owner-selectable control radius: 10px default, full for pill", "override": "owner-control"},
    "semantic.radius.card": {"ref": "primitive.radius.xl", "purpose": "Card and panel radius"},
    "semantic.focus.width": {"ref": "primitive.border-width.strong", "purpose": "Visible focus outline width"},
    "semantic.focus.offset": {"ref": "primitive.border-width.strong", "purpose": "Gap between control and external focus outline"},
    "semantic.focus.color": {"ref": "semantic.color.focus", "purpose": "Focus outline pigment on neutral surfaces", "partner": "bg, surface, panel, hover"},
    "semantic.motion.reduced-duration": {"ref": "primitive.duration.none", "purpose": "Reduced-motion duration; keep all content visible"},
    "component.button.height": {"ref": "semantic.size.control", "purpose": "Minimum button hit area"},
    "component.button.radius": {"ref": "semantic.radius.control", "purpose": "Button corners"},
    "component.button.padding-x": {"ref": "semantic.space.control-x", "purpose": "Button inline padding"},
    "component.button.padding-y": {"ref": "semantic.space.control-y", "purpose": "Button block padding"},
    "component.button.fill": {"ref": "semantic.color.accent", "purpose": "Primary button default fill", "partner": "on-accent"},
    "component.button.hover": {"ref": "semantic.color.accent-hover", "purpose": "Primary button hover fill", "partner": "on-accent"},
    "component.button.pressed": {"ref": "semantic.color.accent-active", "purpose": "Primary button pressed fill", "partner": "on-accent"},
    "component.button.label": {"ref": "semantic.color.on-accent", "purpose": "Primary button label", "partner": "accent, accent-hover, accent-active"},
    "component.button.boundary": {"ref": "semantic.color.accent-ink", "purpose": "Primary button essential perimeter", "partner": "bg, surface, panel, hover"},
    "component.button.disabled-fill": {"ref": "semantic.color.surface", "purpose": "Opaque disabled fill", "partner": "muted"},
    "component.button.disabled-label": {"ref": "semantic.color.muted", "purpose": "Opaque disabled label", "partner": "surface"},
    "component.button.disabled-border": {"ref": "semantic.color.line", "purpose": "Disabled decorative boundary", "partner": "surface"},
    "component.button.type": {"ref": "semantic.type.button", "purpose": "Button label typography"},
    "component.input.height": {"ref": "semantic.size.control", "purpose": "Minimum input hit area"},
    "component.input.radius": {"ref": "semantic.radius.control", "purpose": "Input corners"},
    "component.input.boundary": {"ref": "semantic.color.boundary-strong", "purpose": "Input essential boundary including hover and pressed surroundings", "partner": "bg, surface, panel, hover, line"},
    "component.input.fill": {"light": "semantic.color.panel", "dark": "semantic.color.surface", "purpose": "Input background matching app components.css", "partner": "ink, muted"},
    "component.input.label": {"ref": "semantic.color.ink", "purpose": "Input entered text", "partner": "panel, surface"},
    "component.input.placeholder": {"ref": "semantic.color.muted", "purpose": "Placeholder text with a separate visible label", "partner": "panel, surface"},
    "component.input.type": {"ref": "semantic.type.body", "purpose": "Input text; 16px minimum prevents phone focus zoom"},
    "component.tabs.indicator": {"ref": "semantic.color.state-indicator", "purpose": "Selected tab underline", "partner": "bg, surface, panel, hover"},
    "component.tabs.indicator-width": {"ref": "primitive.border-width.strong", "purpose": "Tab underline thickness"},
    "component.card.fill": {"ref": "semantic.color.panel", "purpose": "Flat card surface", "partner": "ink, muted"},
    "component.card.radius": {"ref": "semantic.radius.card", "purpose": "Card corners"},
    "component.card.padding": {"ref": "semantic.space.card", "purpose": "Card inset"},
    "component.card.border": {"ref": "semantic.color.line", "purpose": "Decorative card divider only", "partner": "panel"},
    "component.card.shadow": {"ref": "semantic.elevation.flat", "purpose": "Cards remain flat"},
    "component.overlay.shadow": {"ref": "semantic.elevation.overlay", "purpose": "Floating popover, menu, modal, drawer and toast shadow"},
    "component.overlay.layer": {"ref": "semantic.layer.overlay", "purpose": "Root overlay stacking group"},
    "component.overlay.scrim-opacity": {"ref": "semantic.opacity.scrim-default", "purpose": "Scrim opacity; apply to scrim only, never its content"},
    "component.focus.color": {"ref": "semantic.focus.color", "purpose": "External focus indicator separated from fill by an offset", "partner": "bg, surface, panel, hover"},
    "component.focus.width": {"ref": "semantic.focus.width", "purpose": "Focus outline width"},
    "component.focus.offset": {"ref": "semantic.focus.offset", "purpose": "External focus gap"},
    "component.button-brand.fill": {"ref": "semantic.color.brand", "purpose": "Public tenant-branded button fill", "partner": "on-brand"},
    "component.button-brand.hover": {"ref": "semantic.color.brand-hover", "purpose": "Public tenant-branded button hover fill", "partner": "on-brand"},
    "component.button-brand.pressed": {"ref": "semantic.color.brand-active", "purpose": "Public tenant-branded button pressed fill", "partner": "on-brand"},
    "component.button-brand.label": {"ref": "semantic.color.on-brand", "purpose": "Public tenant-branded button text", "partner": "brand, brand-hover, brand-active"},
    "component.button-brand.boundary": {"ref": "semantic.color.brand-boundary", "purpose": "Essential public tenant-branded button perimeter", "partner": "bg, surface, panel, hover"}
  }
}