{
  "$schema": "https://brand-os.earnedexposure.com/schema/components.schema.json",
  "brand": "luckiest-man-ventures",
  "engine": "0.1.0",
  "tokens": "tokens.css",
  "css": "system.css",
  "primitives": [
    {
      "id": "button",
      "class": "btn",
      "attrs": {
        "data-kind": [
          "primary",
          "secondary",
          "quiet",
          "danger"
        ],
        "data-size": [
          "sm",
          "md",
          "lg"
        ]
      },
      "contract": "Height from control.height.*; one primary per view; never a pill.",
      "tokens": [
        "control.height",
        "radius.2",
        "color.action.*"
      ]
    },
    {
      "id": "field",
      "class": "field",
      "markup": "<div class=\"field\" data-size=\"md\"><label class=\"field-label\"/><div class=\"field-control\"><input class=\"control\"/></div><p class=\"field-help\"/></div>",
      "contract": "Label slot and help slot are always reserved; fields in a .field-row align by control; error replaces help and sets aria-invalid.",
      "tokens": [
        "control.label-slot",
        "control.help-slot",
        "control.height"
      ]
    },
    {
      "id": "select",
      "class": "select",
      "markup": "<span class=\"select\"><select class=\"control\"/><svg class=\"select-chevron\"/></span>",
      "contract": "Native select, house appearance. Never an unstyled select.",
      "tokens": [
        "control.height",
        "color.surface.border-strong"
      ]
    },
    {
      "id": "toggle",
      "class": "toggle",
      "markup": "<button class=\"toggle\" role=\"switch\" aria-checked=\"true\"><span class=\"toggle-knob\"/></button>",
      "contract": "Fixed 40 by 22 at md, 44px hit target. The only fully rounded control.",
      "tokens": [
        "control.toggle-w",
        "control.toggle-h",
        "control.touch-min"
      ]
    },
    {
      "id": "card-grid",
      "class": "card-grid",
      "attrs": {
        "data-contract": "equal-card-grid"
      },
      "contract": "Equal row heights, body flexes, footer pinned, no hidden truncation. Cards always contrast the section behind them.",
      "tokens": [
        "color.surface.bg",
        "radius.3",
        "space.5"
      ]
    },
    {
      "id": "table",
      "class": "table",
      "contract": "Sticky header, numeric columns right-aligned and tabular, status as text plus dot, horizontal scroll inside .table-wrap on narrow screens with a visible cue.",
      "tokens": [
        "color.surface.*",
        "control.height"
      ]
    },
    {
      "id": "stat",
      "class": "stat",
      "contract": "Label, value, delta. Value in the display face, tabular numerals.",
      "tokens": [
        "type.h2",
        "color.status-text.*"
      ]
    },
    {
      "id": "shell",
      "class": "shell",
      "contract": "Rail plus top bar. Desktop-first with a responsive floor; rail collapses to a row under 860px.",
      "tokens": [
        "color.surface.*",
        "color.action.primary"
      ]
    },
    {
      "id": "section",
      "class": "sec",
      "attrs": {
        "variant": [
          "sec-light",
          "sec-surface",
          "sec-dark",
          "sec-dark-deep"
        ]
      },
      "contract": "Marketing sections alternate light and dark when the profile says so; two dark sections never touch.",
      "tokens": [
        "color.page.bg",
        "color.surface.bg",
        "color.dark-section.*"
      ]
    }
  ],
  "rules": [
    "Luckiest Man Ventures is the umbrella. lightbreak is one product in the portfolio and is always lowercase.",
    "Warm palette only. Warm-white is #fffaf0, never #ffffff.",
    "Every boxed element sits darker than the page it is on. No white or warm-white cards on cream.",
    "Low radius only, 2 to 8px. No pills or fully rounded wide shapes.",
    "Identity colors are accents on marketing pages and appear only in actions, active states, and marks on product pages.",
    "Do not use em dashes."
  ]
}