{
  "$description": "Medora design tokens, foundations layer (phase 3). W3C Design Tokens (DTCG) format. Light theme only. Primitives hold raw values; semantic tokens reference primitives. Values marked 'new — approved 20 Oct 2026' are proposals, not approved palette. Documentation: design-system-documentation.md.",
  "color": {
    "$type": "color",
    "$description": "Primitives (color.HUE.STEP) and semantic tokens (color.CATEGORY.…). Palette replaced 21 Oct 2026 with the teal brand set (primary #004542); every hex is from that brief unless its description says 'Added 21 Oct 2026'. Kebab-case name = path after 'color', joined with hyphens, with '$root' dropped (color.bg.surface.$root = bg-surface).",
    "white": { "$value": "#FFFFFF", "$description": "Cards, forms, dialogs, menus and popovers" },
    "ink": { "$value": "#001110", "$description": "Main text and headings (19.31 on white). Also the modal backdrop colour" },
    "teal": {
      "100": { "$value": "#C1FCF8", "$description": "Selected backgrounds" },
      "200": { "$value": "#83E1DB", "$description": "Chart ramp step 2 only. Added 22 Oct 2026, same OKLCH hue as the primary" },
      "300": { "$value": "#58B7B1", "$description": "Chart ramp step 3 only. Added 22 Oct 2026, same OKLCH hue as the primary" },
      "400": { "$value": "#00ACA6", "$description": "Bright teal accents. Fill only with ink text (6.85); white text fails (2.82)" },
      "500": { "$value": "#008F8A", "$description": "Accessible darker teal hover (ink text 4.87)" },
      "600": { "$value": "#007A75", "$description": "Keyboard focus (5.20 on white, 4.81 on canvas)" },
      "700": { "$value": "#004542", "$description": "Primary brand, sidebar, high-emphasis actions (white text 10.88)" },
      "800": { "$value": "#003B38", "$description": "Darker primary hover" },
      "900": { "$value": "#002F2D", "$description": "Pressed primary controls" }
    },
    "lime": {
      "400": { "$value": "#B0D86D", "$description": "Small brand highlights. Fill only (1.63 on white as foreground); ink text on it 11.85" }
    },
    "clay": {
      "500": { "$value": "#CD6E4B", "$description": "Chart series 2 only. Brand teal's hue (190°) turned 150° at teal-500's lightness. Added 22 Oct 2026 (3.54 on white)" }
    },
    "cobalt": {
      "500": { "$value": "#2B75BA", "$description": "Chart series 3 only, never information blue. Teal hue +60°. Added 22 Oct 2026 (4.82 on white)" }
    },
    "ochre": {
      "500": { "$value": "#CAA73A", "$description": "Chart series 4 only. Teal hue −100°. Added 22 Oct 2026 (2.31 on white: always with labels or a table view)" }
    },
    "gray": {
      "50": { "$value": "#F6F6F6", "$description": "Main workspace" },
      "100": { "$value": "#F5F5F5", "$description": "Subtle sections" },
      "500": { "$value": "#737373", "$description": "Disabled text, subject to context (4.74 on white)" },
      "600": { "$value": "#666666", "$description": "Secondary metadata (5.74 on white)" },
      "700": { "$value": "#525252", "$description": "Labels and descriptions (7.81 on white)" }
    },
    "mist": {
      "200": { "$value": "#D9E2E1", "$description": "Inputs, cards, dividers (1.32 on white: below the 3:1 WCAG asks of input outlines)" },
      "400": { "$value": "#AABDBB", "$description": "Soft emphasis (1.96 on white): decorative outlines, never the only cue" },
      "600": { "$value": "#7A9491", "$description": "Input outlines and emphasized boundaries (3.24 on white, 3.00 on canvas). Added 21 Oct 2026 to meet WCAG 3:1" }
    },
    "green": {
      "100": { "$value": "#DCFCE7", "$description": "Success background" },
      "200": { "$value": "#BBF7D0", "$description": "Soft success alert border (decorative). Added 21 Oct 2026 to pair with green-100" },
      "800": { "$value": "#166534", "$description": "Success text (6.49 on success bg, 7.13 on white)" }
    },
    "amber": {
      "100": { "$value": "#FEF3C7", "$description": "Warning background" },
      "200": { "$value": "#FDE68A", "$description": "Soft warning alert border (decorative)" },
      "800": { "$value": "#92400E", "$description": "Warning text (6.37 on warning bg, 7.09 on white)" }
    },
    "red": {
      "100": { "$value": "#FEE2E2", "$description": "Error / critical background" },
      "200": { "$value": "#FECACA", "$description": "Soft error alert border (decorative)" },
      "700": { "$value": "#B91C1C", "$description": "Error / critical text (5.30 on error bg, 6.47 on white); white text on it 6.47" },
      "800": { "$value": "#991B1B", "$description": "Destructive button hover. Added 21 Oct 2026" }
    },
    "blue": {
      "100": { "$value": "#DBEAFE", "$description": "Information background" },
      "200": { "$value": "#BFDBFE", "$description": "Soft info alert border (decorative)" },
      "700": { "$value": "#1D4ED8", "$description": "Information text (5.49 on info bg, 6.70 on white)" }
    },
    "slate": {
      "200": { "$value": "#E2E8F0", "$description": "Neutral background" },
      "300": { "$value": "#CBD5E1", "$description": "Soft neutral border (decorative). Added 21 Oct 2026" },
      "600": { "$value": "#475569", "$description": "Neutral text (6.15 on neutral bg, 7.58 on white)" }
    },
    "brand": {
      "primary": { "$value": "{color.teal.700}", "$description": "Brand identity, sidebar, primary buttons, high-emphasis actions" },
      "secondary": { "$value": "{color.teal.400}", "$description": "Bright teal accents, selected tab indicators" },
      "accent": { "$value": "{color.lime.400}", "$description": "Small brand highlights, featured badges. Fill only" },
      "neutral": { "$value": "{color.ink}", "$description": "Dark neutral baseline" }
    },
    "bg": {
      "canvas": { "$value": "{color.gray.50}", "$description": "Main workspace behind all content panels" },
      "surface": {
        "$root": { "$value": "{color.white}", "$description": "bg-surface: cards, top bar, content containers" },
        "elevated": { "$value": "{color.white}", "$description": "bg-surface-elevated: dialogs, menus, popovers, tooltips (with shadow)" },
        "subtle": { "$value": "{color.gray.100}", "$description": "bg-surface-subtle: subtle sections, table header rows, zebra rows, skeletons" }
      },
      "input": {
        "disabled": { "$value": "{color.gray.100}", "$description": "Disabled input fields" }
      },
      "dark": { "$value": "{color.teal.700}", "$description": "Sidebar and dark brand sections. Text fg-on-dark" },
      "primary": { "$value": "{color.teal.700}", "$description": "Primary action fills, active header blocks" },
      "accent": { "$value": "{color.lime.400}", "$description": "Callout banners, accent badges, notification highlights" },
      "selected": { "$value": "{color.teal.100}", "$description": "Active nav item, selected table row, selected option. Always paired with a non-colour cue (indicator bar, checkbox, check icon)" },
      "hover": { "$value": "{color.gray.100}", "$description": "Hover on rows and menu items on white surfaces. Decorative; never the only cue" }
    },
    "fg": {
      "primary": { "$value": "{color.ink}", "$description": "Headings, titles, body text. 19.31 on white" },
      "secondary": {
        "$root": { "$value": "{color.gray.700}", "$description": "fg-secondary: labels and descriptions (7.81 on white)" },
        "strong": { "$value": "{color.gray.700}", "$description": "fg-secondary-strong: the same roles on grey surfaces (7.17 on subtle)" }
      },
      "tertiary": { "$value": "{color.gray.600}", "$description": "Secondary metadata: placeholders, timestamps, axis labels. 5.74 on white" },
      "disabled": { "$value": "{color.gray.500}", "$description": "Disabled text, subject to context (exempt; 4.74 on white)" },
      "on": {
        "primary": { "$value": "{color.white}", "$description": "Text on primary teal (10.88)" },
        "accent": { "$value": "{color.ink}", "$description": "Text on lime (11.85) and bright teal (6.85)" },
        "dark": { "$value": "{color.white}", "$description": "Text on the sidebar and dark sections (10.88)" },
        "danger": { "$value": "{color.white}", "$description": "Text on danger buttons (6.47)" }
      }
    },
    "border": {
      "subtle": { "$value": "{color.mist.200}", "$description": "Dividers, table row lines (decorative)" },
      "panel": { "$value": "{color.mist.200}", "$description": "Card and panel outlines" },
      "strong": { "$value": "{color.mist.600}", "$description": "Emphasized boundaries, selected card borders (3.24)" },
      "focus": { "$value": "{color.teal.600}", "$description": "Focus rings for every control" },
      "input": {
        "default": { "$value": "{color.mist.600}", "$description": "Input border at rest (3.24 white, 3.00 canvas)" },
        "hover": { "$value": "{color.teal.700}", "$description": "Input hover (10.88)" },
        "focus": { "$value": "{color.teal.600}", "$description": "Input focus" },
        "error": { "$value": "{color.red.700}", "$description": "Invalid input (6.47); message uses status-error-text" },
        "disabled": { "$value": "{color.mist.200}", "$description": "Disabled input" }
      }
    },
    "action": {
      "primary": {
        "default": { "$value": "{color.teal.700}" },
        "hover": { "$value": "{color.teal.800}" },
        "active": { "$value": "{color.teal.900}" }
      },
      "secondary": {
        "default": { "$value": "{color.teal.600}", "$description": "Secondary buttons. Text fg-on-primary (white 5.20)" },
        "hover": { "$value": "{color.teal.700}" },
        "active": { "$value": "{color.teal.800}" }
      },
      "accent": {
        "default": { "$value": "{color.teal.400}", "$description": "Till Pay / Complete sale, bright teal accents. Text fg-on-accent (ink)" },
        "hover": { "$value": "{color.teal.500}", "$description": "Accessible darker teal hover (ink 4.87)" },
        "active": { "$value": "{color.teal.500}", "$description": "Pressed stays on teal-500: ink text fails on teal-600 (3.72)" }
      },
      "danger": {
        "default": { "$value": "{color.red.700}", "$description": "Destructive actions only. Text fg-on-danger" },
        "hover": { "$value": "{color.red.800}" }
      },
      "disabled": { "$value": "{color.mist.200}", "$description": "Disabled action fill. Text fg-disabled (3.59, exempt)" }
    },
    "status": {
      "success": {
        "fill": { "$value": "{color.green.800}", "$description": "Dots, progress fills and filled badges (white text 7.13)" },
        "bg": { "$value": "{color.green.100}" },
        "text": { "$value": "{color.green.800}", "$description": "7.13 on white, 6.49 on success-bg" },
        "border": { "$value": "{color.green.200}", "$description": "Decorative alert border" }
      },
      "warning": {
        "fill": { "$value": "{color.amber.800}", "$description": "Dots, progress fills and filled badges (white text 7.09)" },
        "bg": { "$value": "{color.amber.100}" },
        "text": { "$value": "{color.amber.800}", "$description": "7.09 on white, 6.37 on warning-bg" },
        "border": { "$value": "{color.amber.200}", "$description": "Decorative alert border" }
      },
      "error": {
        "fill": { "$value": "{color.red.700}", "$description": "Dots, progress fills and filled badges (white text 6.47)" },
        "bg": { "$value": "{color.red.100}" },
        "text": { "$value": "{color.red.700}", "$description": "6.47 on white, 5.30 on error-bg" },
        "border": { "$value": "{color.red.200}", "$description": "Decorative alert border" }
      },
      "info": {
        "fill": { "$value": "{color.blue.700}" },
        "bg": { "$value": "{color.blue.100}" },
        "text": { "$value": "{color.blue.700}", "$description": "6.70 on white, 5.49 on info-bg" },
        "border": { "$value": "{color.blue.200}", "$description": "Decorative alert border" }
      },
      "neutral": {
        "fill": { "$value": "{color.slate.600}" },
        "bg": { "$value": "{color.slate.200}" },
        "text": { "$value": "{color.slate.600}", "$description": "7.58 on white, 6.15 on neutral-bg" },
        "border": { "$value": "{color.slate.300}", "$description": "Decorative alert border" }
      }
    },
    "overlay": {
      "backdrop": { "$value": "{color.ink}", "$description": "Modal and drawer backdrop colour (#001110); strength comes from opacity.backdrop.*" }
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "sans": { "$value": ["Geist", "ui-sans-serif", "system-ui", "Segoe UI", "Roboto", "Arial", "sans-serif"], "$description": "Everything functional: body, labels, tables, numbers. Loaded by next/font as --font-geist" },
      "display": { "$value": ["Bricolage Grotesque", "Geist", "ui-sans-serif", "system-ui", "Segoe UI", "Arial", "sans-serif"], "$description": "Page titles and a few large dashboard headings only. Never data or long text" }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": { "$value": 400, "$description": "Body, table cells, figures" },
      "medium": { "$value": 500, "$description": "Labels, buttons, table headers, badges" },
      "semibold": { "$value": 600, "$description": "Headings, totals, KPI and till figures" }
    },
    "size": {
      "$type": "dimension",
      "13": { "$value": "13px", "$description": "Minimum for functional text: badges, captions, chart labels" },
      "14": { "$value": "14px", "$description": "UI text: tables, buttons, inputs, labels, menus (the data-dense app standard)" },
      "15": { "$value": "15px", "$description": "Body text" },
      "16": { "$value": "16px", "$description": "Long-form text, login, touch density" },
      "18": { "$value": "18px" },
      "24": { "$value": "24px" },
      "28": { "$value": "28px" },
      "32": { "$value": "32px" },
      "44": { "$value": "44px" }
    },
    "line-height": {
      "$type": "dimension",
      "18": { "$value": "18px" },
      "20": { "$value": "20px" },
      "22": { "$value": "22px" },
      "24": { "$value": "24px" },
      "28": { "$value": "28px" },
      "32": { "$value": "32px" },
      "36": { "$value": "36px" },
      "40": { "$value": "40px" },
      "52": { "$value": "52px" }
    },
    "letter-spacing": {
      "$type": "dimension",
      "tight": { "$value": "-0.02em", "$description": "Display text 32 px and up; figures use snug (C1, approved 20 Oct 2026)" },
      "snug": { "$value": "-0.01em", "$description": "Page titles, KPI and till figures" },
      "normal": { "$value": "0em", "$description": "Everything 18 px and below" }
    },
    "numeric": {
      "$type": "fontVariantNumeric",
      "tabular": { "$value": "tabular-nums", "$description": "Money, quantities, dates in tables and totals. Not a DTCG standard type; emitted as font-variant-numeric" },
      "proportional": { "$value": "normal", "$description": "Running text" }
    },
    "style": {
      "$type": "typography",
      "$description": "Composite type styles. Where $extensions.medora.fontVariantNumeric is set, apply font-variant-numeric: tabular-nums.",
      "display": {
        "$value": { "fontFamily": "{font.family.display}", "fontSize": "{font.size.32}", "lineHeight": "{font.line-height.40}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.tight}" },
        "$description": "Login brand moment, the one large dashboard greeting/heading. At most one per screen"
      },
      "page-title": {
        "$value": { "fontFamily": "{font.family.display}", "fontSize": "{font.size.24}", "lineHeight": "{font.line-height.32}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.snug}" },
        "$description": "The h1 of every page"
      },
      "heading-lg": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.18}", "lineHeight": "{font.line-height.24}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Section headings, dialog and drawer titles"
      },
      "heading-md": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.16}", "lineHeight": "{font.line-height.24}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Card, panel and chart titles"
      },
      "heading-sm": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.15}", "lineHeight": "{font.line-height.22}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Form section labels, sub-sections, grouped table headings"
      },
      "body-lg": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.16}", "lineHeight": "{font.line-height.24}", "fontWeight": "{font.weight.regular}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Touch density text, empty-state messages, login"
      },
      "body-md": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.15}", "lineHeight": "{font.line-height.22}", "fontWeight": "{font.weight.regular}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Default body text, form inputs, comfortable table cells"
      },
      "body-sm": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.14}", "lineHeight": "{font.line-height.20}", "fontWeight": "{font.weight.regular}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Compact table cells and dense lists"
      },
      "label-lg": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.16}", "lineHeight": "{font.line-height.24}", "fontWeight": "{font.weight.medium}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Touch-size buttons and till actions"
      },
      "label-md": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.14}", "lineHeight": "{font.line-height.20}", "fontWeight": "{font.weight.medium}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Field labels, buttons, tabs, nav items"
      },
      "label-sm": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.13}", "lineHeight": "{font.line-height.18}", "fontWeight": "{font.weight.medium}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Compact buttons, compact table header cells, filter chips (C2, approved 20 Oct 2026)"
      },
      "label-xs": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.13}", "lineHeight": "{font.line-height.18}", "fontWeight": "{font.weight.medium}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Badges, status pills, tags"
      },
      "caption": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.13}", "lineHeight": "{font.line-height.18}", "fontWeight": "{font.weight.regular}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Helper text, 'as at' timestamps, chart axis labels. Smallest functional text"
      },
      "numeric-md": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.15}", "lineHeight": "{font.line-height.22}", "fontWeight": "{font.weight.regular}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Money and quantities in comfortable tables and forms. Right-aligned",
        "$extensions": { "medora": { "fontVariantNumeric": "{font.numeric.tabular}" } }
      },
      "numeric-sm": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.14}", "lineHeight": "{font.line-height.20}", "fontWeight": "{font.weight.regular}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Money and quantities in compact tables. Right-aligned",
        "$extensions": { "medora": { "fontVariantNumeric": "{font.numeric.tabular}" } }
      },
      "numeric-strong": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.15}", "lineHeight": "{font.line-height.22}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Totals rows, subtotals, balances",
        "$extensions": { "medora": { "fontVariantNumeric": "{font.numeric.tabular}" } }
      },
      "kpi": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.28}", "lineHeight": "{font.line-height.36}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.snug}" },
        "$description": "Headline figure on stat and money cards. Geist, not Bricolage: it is data",
        "$extensions": { "medora": { "fontVariantNumeric": "{font.numeric.tabular}" } }
      },
      "till-line": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.18}", "lineHeight": "{font.line-height.28}", "fontWeight": "{font.weight.medium}", "letterSpacing": "{font.letter-spacing.normal}" },
        "$description": "Cart line names, quantities and amounts at the till",
        "$extensions": { "medora": { "fontVariantNumeric": "{font.numeric.tabular}" } }
      },
      "till-tender": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.28}", "lineHeight": "{font.line-height.36}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.snug}" },
        "$description": "Amount tendered, change due, M-Pesa amount",
        "$extensions": { "medora": { "fontVariantNumeric": "{font.numeric.tabular}" } }
      },
      "till-total": {
        "$value": { "fontFamily": "{font.family.sans}", "fontSize": "{font.size.44}", "lineHeight": "{font.line-height.52}", "fontWeight": "{font.weight.semibold}", "letterSpacing": "{font.letter-spacing.snug}" },
        "$description": "Sale total. The largest figure in the product; readable from a step back",
        "$extensions": { "medora": { "fontVariantNumeric": "{font.numeric.tabular}" } }
      }
    }
  },
  "space": {
    "$type": "dimension",
    "$description": "4 px base scale. Keys match Tailwind 4 spacing steps (key x 4 px).",
    "0": { "$value": "0px" },
    "0-5": { "$value": "2px", "$description": "Hairline gaps: icon-to-badge, chart segment gap" },
    "1": { "$value": "4px", "$description": "Label to input, icon to text in compact controls" },
    "1-5": { "$value": "6px", "$description": "Icon to text in buttons" },
    "2": { "$value": "8px", "$description": "Gap between related controls, compact cell padding (vertical)" },
    "3": { "$value": "12px", "$description": "Compact cell padding (horizontal), control padding" },
    "4": { "$value": "16px", "$description": "Comfortable cell padding, card padding (compact), tablet gutter" },
    "5": { "$value": "20px", "$description": "Gap between form fields" },
    "6": { "$value": "24px", "$description": "Card padding (comfortable), desktop gutter, grid gap" },
    "8": { "$value": "32px", "$description": "Gap between page sections, wide-desktop gutter" },
    "10": { "$value": "40px" },
    "12": { "$value": "48px", "$description": "Empty-state padding" },
    "16": { "$value": "64px" }
  },
  "density": {
    "$description": "Set per screen or component (P4), never per user. compact = grids, long lists, reports. comfortable = forms, detail pages. touch = till actions and anything likely to be tapped.",
    "compact": {
      "control-height": { "$type": "dimension", "$value": "{size.control.sm}", "$description": "32 px" },
      "table-row-height": { "$type": "dimension", "$value": "36px" },
      "table-header-height": { "$type": "dimension", "$value": "36px" },
      "cell-padding-x": { "$type": "dimension", "$value": "{space.3}" },
      "cell-padding-y": { "$type": "dimension", "$value": "{space.2}" },
      "control-padding-x": { "$type": "dimension", "$value": "{space.3}" },
      "control-gap": { "$type": "dimension", "$value": "{space.2}" },
      "field-gap": { "$type": "dimension", "$value": "{space.3}" },
      "panel-padding": { "$type": "dimension", "$value": "{space.4}" },
      "icon-size": { "$type": "dimension", "$value": "{size.icon.sm}" },
      "text": { "$type": "typography", "$value": "{font.style.body-sm}" },
      "numeric": { "$type": "typography", "$value": "{font.style.numeric-sm}" },
      "label": { "$type": "typography", "$value": "{font.style.label-sm}" }
    },
    "comfortable": {
      "control-height": { "$type": "dimension", "$value": "{size.control.md}", "$description": "40 px" },
      "table-row-height": { "$type": "dimension", "$value": "48px" },
      "table-header-height": { "$type": "dimension", "$value": "40px" },
      "cell-padding-x": { "$type": "dimension", "$value": "{space.4}" },
      "cell-padding-y": { "$type": "dimension", "$value": "{space.3}" },
      "control-padding-x": { "$type": "dimension", "$value": "{space.4}" },
      "control-gap": { "$type": "dimension", "$value": "{space.3}" },
      "field-gap": { "$type": "dimension", "$value": "{space.5}" },
      "panel-padding": { "$type": "dimension", "$value": "{space.6}" },
      "icon-size": { "$type": "dimension", "$value": "{size.icon.md}" },
      "text": { "$type": "typography", "$value": "{font.style.body-md}" },
      "numeric": { "$type": "typography", "$value": "{font.style.numeric-md}" },
      "label": { "$type": "typography", "$value": "{font.style.label-md}" }
    },
    "touch": {
      "control-height": { "$type": "dimension", "$value": "{size.control.lg}", "$description": "48 px; above the 44 px touch minimum" },
      "table-row-height": { "$type": "dimension", "$value": "56px", "$description": "Till cart lines and tappable lists" },
      "table-header-height": { "$type": "dimension", "$value": "40px" },
      "cell-padding-x": { "$type": "dimension", "$value": "{space.4}" },
      "cell-padding-y": { "$type": "dimension", "$value": "{space.4}" },
      "control-padding-x": { "$type": "dimension", "$value": "{space.5}" },
      "control-gap": { "$type": "dimension", "$value": "{space.3}", "$description": "At least 8 px between adjacent touch targets" },
      "field-gap": { "$type": "dimension", "$value": "{space.5}" },
      "panel-padding": { "$type": "dimension", "$value": "{space.4}" },
      "icon-size": { "$type": "dimension", "$value": "{size.icon.md}" },
      "text": { "$type": "typography", "$value": "{font.style.body-lg}" },
      "numeric": { "$type": "typography", "$value": "{font.style.till-line}" },
      "label": { "$type": "typography", "$value": "{font.style.label-lg}" }
    }
  },
  "size": {
    "$type": "dimension",
    "control": {
      "xs": { "$value": "24px", "$description": "Icon buttons inside compact rows; the WCAG 2.2 minimum" },
      "sm": { "$value": "32px", "$description": "Compact density controls" },
      "md": { "$value": "40px", "$description": "Comfortable density controls (default)" },
      "lg": { "$value": "48px", "$description": "Touch density controls" },
      "xl": { "$value": "56px", "$description": "The till's Pay / Complete sale button" }
    },
    "target": {
      "min": { "$value": "24px", "$description": "WCAG 2.2 AA minimum target for every control" },
      "touch": { "$value": "44px", "$description": "Minimum for till actions and anything likely to be tapped" }
    },
    "icon": {
      "sm": { "$value": "16px", "$description": "Inline with text, table cells, compact controls" },
      "md": { "$value": "20px", "$description": "Navigation, buttons, inputs" },
      "lg": { "$value": "24px", "$description": "Status icons in alerts on tinted backgrounds, empty states only" },
      "stroke": { "$type": "number", "$value": 2, "$description": "One Lucide stroke weight everywhere (Lucide default)" }
    },
    "checkbox": { "$value": "16px", "$description": "Visual box; hit area is padded to size.target.min" },
    "avatar": {
      "sm": { "$value": "24px" },
      "md": { "$value": "32px", "$description": "Top bar user menu" },
      "lg": { "$value": "40px", "$description": "Profile headers" }
    },
    "logo": {
      "min-height": { "$value": "32px", "$description": "Smallest on-screen height of the full medora-logo.svg lockup (326 x 88); below it use the symbol alone. Raised from 24 px, F4, approved 20 Oct 2026" },
      "sidebar-height": { "$value": "32px" },
      "login-height": { "$value": "48px" },
      "symbol-min-height": { "$value": "20px", "$description": "Symbol alone (collapsed sidebar, favicon source), if V6 confirms it may be used alone" },
      "clear-space": { "$type": "number", "$value": 0.25, "$description": "Clear space on every side = 0.25 x rendered logo height" }
    }
  },
  "radius": {
    "$type": "dimension",
    "none": { "$value": "0px", "$description": "Table cells, full-bleed bars, the edge side of drawers" },
    "xs": { "$value": "4px", "$description": "Checkboxes, items inside a segmented control, tooltips" },
    "sm": { "$value": "6px", "$description": "Controls: buttons, inputs, selects, chips, menu items" },
    "md": { "$value": "8px", "$description": "Cards, panels, table containers, dropdowns, popovers, toasts" },
    "lg": { "$value": "12px", "$description": "Dialogs and drawers (exposed corners only)" },
    "full": { "$value": "9999px", "$description": "Badges, status pills, tags, avatars only" }
  },
  "border": {
    "$type": "dimension",
    "width": {
      "none": { "$value": "0px" },
      "default": { "$value": "1px", "$description": "Every border: cards, panels, inputs, dividers" },
      "strong": { "$value": "2px", "$description": "Selected card, active tab underline" },
      "indicator": { "$value": "3px", "$description": "Active navigation item bar" }
    }
  },
  "shadow": {
    "$type": "shadow",
    "$description": "Elevation only; nothing at rest. Colour is ink (#001110) at low alpha, written as 8-digit hex.",
    "raised": {
      "$value": { "color": "#0011101A", "offsetX": "0px", "offsetY": "1px", "blur": "3px", "spread": "0px" },
      "$description": "Level 1: sticky table header and top bar once content scrolls under them"
    },
    "overlay": {
      "$value": [
        { "color": "#0011101F", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "-2px" },
        { "color": "#0011100F", "offsetX": "0px", "offsetY": "2px", "blur": "4px", "spread": "-2px" }
      ],
      "$description": "Level 2: dropdowns, menus, popovers, tooltips, toasts"
    },
    "modal": {
      "$value": [
        { "color": "#00111029", "offsetX": "0px", "offsetY": "16px", "blur": "32px", "spread": "-8px" },
        { "color": "#00111014", "offsetX": "0px", "offsetY": "4px", "blur": "8px", "spread": "-4px" }
      ],
      "$description": "Level 3: dialogs and drawers"
    }
  },
  "focus": {
    "ring-width": { "$type": "dimension", "$value": "2px" },
    "ring-offset": { "$type": "dimension", "$value": "2px", "$description": "Gap in the surface colour between control and ring, so the ring shows on blue fills" },
    "ring-color": { "$type": "color", "$value": "{color.border.focus}", "$description": "Always focus teal #007A75, never lime" },
    "ring-color-inverse": { "$type": "color", "$value": "{color.white}", "$description": "For the rare control on bg-primary or bg-dark surfaces" },
    "ring-offset-color": { "$type": "color", "$value": "{color.bg.surface.$root}" },
    "ring-inset": { "$type": "dimension", "$value": "2px", "$description": "N4: 2 px ring drawn inside the element, no offset. For full-width rows, cells, menu and listbox options in scrolling containers where the outer ring would clip. Approved 20 Oct 2026" }
  },
  "opacity": {
    "$type": "number",
    "backdrop": {
      "dialog": { "$value": 0.5, "$description": "Behind dialogs: #001110 at 50%. Focuses attention, keeps context faintly visible" },
      "drawer": { "$value": 0.2, "$description": "Behind master-detail drawers: the list stays readable" }
    },
    "disabled": { "$value": 1, "$description": "Disabled controls use colour tokens (action-disabled, fg-disabled), not transparency" }
  },
  "z-index": {
    "$type": "number",
    "base": { "$value": 0 },
    "raised": { "$value": 10, "$description": "Sticky table headers and columns inside a scrolling panel" },
    "sticky": { "$value": 100, "$description": "Top bar, sticky page action bars" },
    "sidebar": { "$value": 200, "$description": "Sidebar when it overlays content on tablet" },
    "backdrop": { "$value": 300 },
    "drawer": { "$value": 400 },
    "dialog": { "$value": 500, "$description": "Above drawers, so a confirmation can open from a drawer" },
    "dropdown": { "$value": 600, "$description": "Menus, selects, popovers; above dialogs because they open inside them" },
    "toast": { "$value": 700 },
    "tooltip": { "$value": 800 }
  },
  "breakpoint": {
    "$type": "dimension",
    "$description": "Min-width breakpoints, named as in Tailwind 4. Below 768 px is not a supported target.",
    "md": { "$value": "768px", "$description": "Tablet portrait: dashboard must work; sidebar becomes an overlay" },
    "lg": { "$value": "1024px", "$description": "Tablet landscape / small laptop: sidebar collapsed to a rail by default; likely POS tablet width" },
    "xl": { "$value": "1280px", "$description": "Desktop, the primary design width: sidebar expanded" },
    "2xl": { "$value": "1536px", "$description": "Wide desktop: wider gutters, content capped at layout.content.max-width" }
  },
  "layout": {
    "$type": "dimension",
    "sidebar": {
      "width-expanded": { "$value": "256px", "$description": "Fits the longest menu label at label-md with icon and chevron" },
      "width-collapsed": { "$value": "64px", "$description": "Icon rail: 20 px icon centred in a 44 px target" },
      "item-height": { "$value": "40px", "$description": "44 px at the md and lg breakpoints (touch)" },
      "item-height-touch": { "$value": "44px" },
      "item-padding-x": { "$value": "{space.3}", "$description": "N1a: sidebar item horizontal padding (12 px). Approved 20 Oct 2026" },
      "icon-gap": { "$value": "{space.3}", "$description": "N1a: icon to label (12 px). Approved 20 Oct 2026" },
      "group-gap": { "$value": "{space.4}", "$description": "N1a: gap between menu groups (16 px). Approved 20 Oct 2026" }
    },
    "topbar": {
      "height": { "$value": "56px", "$description": "Holds 40 px controls with 8 px above and below" }
    },
    "content": {
      "max-width": { "$value": "1600px", "$description": "Lists, tables and dashboards fill the width up to this, then centre" },
      "form-max-width": { "$value": "720px", "$description": "Single-column forms and readable text" }
    },
    "gutter": {
      "md": { "$value": "16px", "$description": "768-1023 px" },
      "lg": { "$value": "24px", "$description": "1024-1535 px" },
      "2xl": { "$value": "32px", "$description": "1536 px and up" }
    },
    "grid": {
      "columns": { "$type": "number", "$value": 12 },
      "gap": { "$value": "24px", "$description": "16 px below the lg breakpoint" },
      "gap-tablet": { "$value": "16px" }
    },
    "section-gap": { "$value": "32px", "$description": "Vertical gap between page sections" },
    "page-header": {
      "padding-top": { "$value": "{space.6}", "$description": "N2: space above the page header (24 px). Approved 20 Oct 2026" },
      "gap": { "$value": "{space.6}", "$description": "N2: space between the page header and the content (24 px). Approved 20 Oct 2026" }
    },
    "pos": {
      "cart-width": { "$value": "400px", "$description": "N3: fixed cart panel on the till. Provisional until till hardware is known (OQ-29, D6). Approved (provisional) 20 Oct 2026" }
    },
    "action-bar": {
      "height": { "$value": "64px", "$description": "N7: sticky form and bulk-action bar, comfortable density (40 px control + space.3 above and below). Approved 20 Oct 2026" }
    },
    "toast": {
      "width": { "$value": "360px", "$description": "T2: toast width so stacked toasts align. Approved 20 Oct 2026" }
    },
    "popover": {
      "max-width": { "$value": "320px", "$description": "T3: cap for menus and small popovers. Approved 20 Oct 2026" },
      "width-md": { "$value": "400px", "$description": "T4: fixed width for content popovers; separate from max-width. Approved 20 Oct 2026" }
    },
    "tooltip": {
      "max-width": { "$value": "240px", "$description": "T5: tooltips wrap instead of stretching. Approved 20 Oct 2026" }
    },
    "dialog": {
      "width-sm": { "$value": "400px", "$description": "Confirmations" },
      "width-md": { "$value": "560px", "$description": "Quick-add forms" },
      "width-lg": { "$value": "800px", "$description": "Review-before-commit, multi-column content" }
    },
    "drawer": {
      "width-md": { "$value": "480px", "$description": "Record detail beside a list" },
      "width-lg": { "$value": "720px", "$description": "Edit forms in a drawer" }
    }
  },
  "motion": {
    "duration": {
      "$type": "duration",
      "none": { "$value": "0ms", "$description": "Payment path, focus rings, and everything under reduced motion" },
      "fast": { "$value": "100ms", "$description": "Hover and pressed colour changes; exits" },
      "base": { "$value": "150ms", "$description": "Dropdowns, popovers, tooltips, accordions" },
      "slow": { "$value": "200ms", "$description": "Dialogs, drawers, toasts entering. The ceiling" },
      "skeleton": { "$value": "1500ms", "$description": "One pulse cycle of a loading skeleton; static under reduced motion" },
      "spinner": { "$value": "1000ms", "$description": "T1: one rotation of the spinner (loop). Approved 20 Oct 2026" }
    },
    "delay": {
      "$type": "duration",
      "tooltip": { "$value": "500ms", "$description": "Before a tooltip opens on hover; 0 on keyboard focus" },
      "loading": { "$value": "300ms", "$description": "T8: wait before a skeleton or spinner appears, so fast responses do not flicker. Approved 20 Oct 2026" }
    },
    "distance": {
      "$type": "dimension",
      "overlay": { "$value": "{space.1}", "$description": "N6a: how far dialogs, popovers and toasts move on enter (4 px) with opacity; no scale. Approved 20 Oct 2026" }
    },
    "easing": {
      "$type": "cubicBezier",
      "standard": { "$value": [0.2, 0, 0, 1], "$description": "Things that change in place (accordion, colour)" },
      "enter": { "$value": [0, 0, 0.2, 1], "$description": "Decelerate: overlays arriving" },
      "exit": { "$value": [0.4, 0, 1, 1], "$description": "Accelerate: overlays leaving" }
    }
  },
  "feedback": {
    "$type": "duration",
    "$description": "Display times for feedback. These are not motion.",
    "toast": {
      "duration": { "$value": "5000ms", "$description": "T6: how long a toast stays. Approved 20 Oct 2026" },
      "duration-action": { "$value": "8000ms", "$description": "T7: toast with an action such as Undo; never shorter than the undo window. Approved 20 Oct 2026" }
    }
  },
  "chart": {
    "$type": "color",
    "$description": "Flat 2D charts, derived from the brand teal. Series are teal-500 and that hue turned around the OKLCH wheel at matched lightness and strength; checked 22 Oct 2026 with the dataviz palette validator (lightness band, chroma floor, colour-blind ΔE 8.7 worst adjacent, normal-vision ΔE 22.9). Assign series in order and keep each colour on its entity when filters change. Ochre and the lime highlight are under 3:1, so charts using them show values as labels or a table. Scatter-type charts, where every colour touches every other, use series 1, 2 and 4 only (teal and cobalt are too close side by side there).",
    "series": {
      "1": { "$value": "{color.teal.500}", "$description": "Main series, brand teal (3.97 on white)" },
      "2": { "$value": "{color.clay.500}", "$description": "Second series (3.54)" },
      "3": { "$value": "{color.cobalt.500}", "$description": "Third series (4.82)" },
      "4": { "$value": "{color.ochre.500}", "$description": "Fourth series (2.31: labels or table required). More than 4 series: fold into 'Other', use a table or small multiples" }
    },
    "total": { "$value": "{color.slate.600}", "$description": "A lone total drawn beside categories (net sales next to a by-method split), so it never borrows a category's colour (7.58)" },
    "sequential": {
      "$description": "Amounts on one teal scale, light to dark, ending at the primary. Zero is not a step: leave it blank",
      "1": { "$value": "{color.teal.100}" },
      "2": { "$value": "{color.teal.200}" },
      "3": { "$value": "{color.teal.300}" },
      "4": { "$value": "{color.teal.500}" },
      "5": { "$value": "{color.teal.700}", "$description": "Darkest step; white text on it" }
    },
    "diverging": {
      "$description": "Above or below a target or baseline. Two poles, neutral midpoint",
      "positive": { "$value": "{color.teal.500}" },
      "midpoint": { "$value": "{color.mist.200}" },
      "negative": { "$value": "{color.clay.500}" }
    },
    "highlight": { "$value": "{color.lime.400}", "$description": "At most one mark per chart. Fails 3:1 alone (1.63), so always with highlight-stroke and a value label" },
    "highlight-stroke": { "$value": "{color.ink}", "$description": "1 px outline on the lime mark (19.31 on white)" },
    "segment-gap": { "$value": "{color.white}", "$description": "2 px separator between stacked segments and adjacent areas" },
    "gridline": { "$value": "{color.mist.200}", "$description": "Decorative, horizontal only" },
    "axis-line": { "$value": "{color.gray.500}", "$description": "Zero baseline (4.74)" },
    "axis-label": { "$value": "{color.gray.600}", "$description": "Tick labels, caption style (5.74)" },
    "reference-line": { "$value": "{color.ink}", "$description": "Targets and averages, dashed" },
    "plot-background": { "$value": "{color.white}" },
    "status": {
      "positive": { "$value": "{color.green.800}", "$description": "Good meaning only (7.13)" },
      "caution": { "$value": "{color.amber.800}", "$description": "Warning meaning only (7.09)" },
      "negative": { "$value": "{color.red.700}", "$description": "Bad meaning only (6.47)" }
    }
  }
}