{
  "$schema": "https://volty.dev/schema/v1",
  "version": "0.1.3",
  "description": "Modern CSS theme library — typed design tokens, native Shadow DOM theming, zero build step",
  "tokens": {
    "--vt-color-brand": {
      "syntax": "<color>",
      "initial": "oklch(55% 0.2 250)",
      "group": "color"
    },
    "--vt-color-surface": {
      "syntax": "<color>",
      "initial": "oklch(98% 0 0)",
      "group": "color"
    },
    "--vt-color-surface-raised": {
      "syntax": "<color>",
      "initial": "oklch(96% 0 0)",
      "group": "color"
    },
    "--vt-color-surface-overlay": {
      "syntax": "<color>",
      "initial": "oklch(100% 0 0)",
      "group": "color"
    },
    "--vt-color-text": {
      "syntax": "<color>",
      "initial": "oklch(15% 0 0)",
      "group": "color"
    },
    "--vt-color-text-muted": {
      "syntax": "<color>",
      "initial": "oklch(45% 0 0)",
      "group": "color"
    },
    "--vt-color-border": {
      "syntax": "<color>",
      "initial": "oklch(85% 0 0)",
      "group": "color"
    },
    "--vt-color-brand-text": {
      "syntax": "<color>",
      "initial": "white",
      "group": "color"
    },
    "--vt-color-brand-hover": {
      "syntax": "<color>",
      "initial": "oklch(45% 0.2 250)",
      "group": "color"
    },
    "--vt-color-brand-active": {
      "syntax": "<color>",
      "initial": "oklch(38% 0.2 250)",
      "group": "color"
    },
    "--vt-color-brand-subtle": {
      "syntax": "<color>",
      "initial": "oklch(97% 0.03 250)",
      "group": "color"
    },
    "--vt-color-brand-ring": {
      "syntax": "<color>",
      "initial": "oklch(55% 0.2 250 / 40%)",
      "group": "color"
    },
    "--vt-color-success": {
      "syntax": "<color>",
      "initial": "oklch(55% 0.15 145)",
      "group": "color"
    },
    "--vt-color-warning": {
      "syntax": "<color>",
      "initial": "oklch(70% 0.18 70)",
      "group": "color"
    },
    "--vt-color-danger": {
      "syntax": "<color>",
      "initial": "oklch(55% 0.22 25)",
      "group": "color"
    },
    "--vt-color-info": {
      "syntax": "<color>",
      "initial": "oklch(60% 0.15 240)",
      "group": "color"
    },
    "--vt-color-success-subtle": {
      "syntax": "<color>",
      "initial": "oklch(97% 0.03 145)",
      "group": "color"
    },
    "--vt-color-warning-subtle": {
      "syntax": "<color>",
      "initial": "oklch(97% 0.03 70)",
      "group": "color"
    },
    "--vt-color-danger-subtle": {
      "syntax": "<color>",
      "initial": "oklch(97% 0.03 25)",
      "group": "color"
    },
    "--vt-color-info-subtle": {
      "syntax": "<color>",
      "initial": "oklch(97% 0.03 240)",
      "group": "color"
    },
    "--vt-space-1": {
      "syntax": "<length>",
      "initial": "4px",
      "group": "spacing"
    },
    "--vt-space-2": {
      "syntax": "<length>",
      "initial": "8px",
      "group": "spacing"
    },
    "--vt-space-3": {
      "syntax": "<length>",
      "initial": "12px",
      "group": "spacing"
    },
    "--vt-space-4": {
      "syntax": "<length>",
      "initial": "16px",
      "group": "spacing"
    },
    "--vt-space-5": {
      "syntax": "<length>",
      "initial": "24px",
      "group": "spacing"
    },
    "--vt-space-6": {
      "syntax": "<length>",
      "initial": "32px",
      "group": "spacing"
    },
    "--vt-space-8": {
      "syntax": "<length>",
      "initial": "48px",
      "group": "spacing"
    },
    "--vt-space-10": {
      "syntax": "<length>",
      "initial": "64px",
      "group": "spacing"
    },
    "--vt-radius-sm": {
      "syntax": "<length>",
      "initial": "4px",
      "group": "radius"
    },
    "--vt-radius-md": {
      "syntax": "<length>",
      "initial": "8px",
      "group": "radius"
    },
    "--vt-radius-lg": {
      "syntax": "<length>",
      "initial": "12px",
      "group": "radius"
    },
    "--vt-radius-xl": {
      "syntax": "<length>",
      "initial": "16px",
      "group": "radius"
    },
    "--vt-radius-full": {
      "syntax": "<length>",
      "initial": "9999px",
      "group": "radius"
    },
    "--vt-text-xs": {
      "syntax": "<length>",
      "initial": "12px",
      "group": "font-size"
    },
    "--vt-text-sm": {
      "syntax": "<length>",
      "initial": "14px",
      "group": "font-size"
    },
    "--vt-text-base": {
      "syntax": "<length>",
      "initial": "16px",
      "group": "font-size"
    },
    "--vt-text-lg": {
      "syntax": "<length>",
      "initial": "18px",
      "group": "font-size"
    },
    "--vt-text-xl": {
      "syntax": "<length>",
      "initial": "20px",
      "group": "font-size"
    },
    "--vt-text-2xl": {
      "syntax": "<length>",
      "initial": "24px",
      "group": "font-size"
    },
    "--vt-text-3xl": {
      "syntax": "<length>",
      "initial": "30px",
      "group": "font-size"
    },
    "--vt-text-4xl": {
      "syntax": "<length>",
      "initial": "36px",
      "group": "font-size"
    },
    "--vt-duration-fast": {
      "syntax": "<time>",
      "initial": "100ms",
      "group": "duration"
    },
    "--vt-duration-base": {
      "syntax": "<time>",
      "initial": "200ms",
      "group": "duration"
    },
    "--vt-duration-slow": {
      "syntax": "<time>",
      "initial": "350ms",
      "group": "duration"
    }
  },
  "components": [
    {
      "class": "vt-btn",
      "element": "button | a",
      "description": "Button",
      "modifiers": [
        "--sm",
        "--lg",
        "--outline",
        "--ghost",
        "--surface",
        "--danger",
        "--icon"
      ],
      "notes": "Use aria-disabled instead of disabled for accessible disabled state."
    },
    {
      "class": "vt-card",
      "element": "div | article",
      "description": "Surface card",
      "modifiers": [
        "--raised",
        "--interactive"
      ],
      "elements": [
        "__header",
        "__title",
        "__description",
        "__body",
        "__footer"
      ]
    },
    {
      "class": "vt-badge",
      "element": "span",
      "description": "Inline status badge",
      "modifiers": [
        "--success",
        "--warning",
        "--danger",
        "--info",
        "--outline"
      ]
    },
    {
      "class": "vt-input",
      "element": "input",
      "description": "Text input. Wrap in .vt-field for label + hint layout.",
      "modifiers": [
        "--sm",
        "--lg",
        "--error"
      ]
    },
    {
      "class": "vt-select",
      "element": "div > select",
      "description": "Select dropdown wrapper. Native <select> inside .vt-select div.",
      "modifiers": [
        "--sm",
        "--lg",
        "--error"
      ]
    },
    {
      "class": "vt-switch",
      "element": "label > input[type=checkbox]",
      "description": "Toggle switch. CSS-only, no JS needed."
    },
    {
      "class": "vt-alert",
      "element": "div[role=alert]",
      "description": "Inline alert banner.",
      "modifiers": [
        "--success",
        "--warning",
        "--danger",
        "--solid"
      ],
      "elements": [
        "__icon",
        "__body",
        "__title",
        "__desc",
        "__dismiss"
      ]
    },
    {
      "class": "vt-tooltip",
      "element": "span.vt-tooltip-wrap > *",
      "description": "Tooltip. Two paths: anchor-positioning (.vt-tooltip) or attribute (data-tooltip).",
      "notes": "data-tooltip-placement: top (default) | bottom | left | right"
    },
    {
      "class": "vt-modal",
      "element": "dialog",
      "description": "Modal dialog. Uses native <dialog> element.",
      "modifiers": [
        "--sm",
        "--lg",
        "--full",
        "--danger"
      ],
      "elements": [
        "__header",
        "__title",
        "__close",
        "__body",
        "__footer"
      ],
      "notes": "JS: el.showModal() / el.close(). Close on backdrop: modal.addEventListener('click', e => { if (e.target === modal) modal.close() })"
    },
    {
      "class": "vt-toast",
      "element": "div (managed by Volty.toast())",
      "description": "Toast notification. Created programmatically.",
      "modifiers": [
        "--success",
        "--warning",
        "--danger"
      ],
      "elements": [
        "__icon",
        "__body",
        "__title",
        "__message",
        "__dismiss",
        "__progress"
      ],
      "notes": "JS: Volty.toast(message) or Volty.toast({ title, message, variant, duration, dismissible, progress }). duration:0 = persistent."
    },
    {
      "class": "vt-tabs",
      "element": "div",
      "description": "Tabbed content panel. Requires Volty.initTabs().",
      "modifiers": [
        "--pills"
      ],
      "elements": [
        "__list",
        "__trigger",
        "__panel"
      ],
      "notes": "JS: Volty.initTabs() called automatically. trigger needs aria-controls matching panel id. aria-selected managed automatically."
    },
    {
      "class": "vt-accordion",
      "element": "div > details.vt-accordion__item",
      "description": "Collapsible accordion built on native <details>/<summary>. Zero JS needed.",
      "elements": [
        "__item",
        "__trigger",
        "__body"
      ]
    },
    {
      "class": "vt-dropdown",
      "element": "div",
      "description": "Toggleable dropdown menu. Requires Volty.initDropdowns().",
      "modifiers": [
        "--end"
      ],
      "elements": [
        "__trigger",
        "__menu",
        "__item",
        "__separator",
        "__label"
      ],
      "notes": "JS: Volty.initDropdowns() called automatically. Use aria-haspopup='true' aria-expanded='false' on trigger."
    },
    {
      "class": "vt-skeleton",
      "element": "span | div",
      "description": "Shimmer loading placeholder. Pure CSS, no JS.",
      "modifiers": [
        "--text",
        "--circle",
        "--card",
        "--avatar",
        "--button"
      ]
    },
    {
      "class": "vt-progress",
      "element": "progress",
      "description": "Styled native <progress> element.",
      "modifiers": [
        "--sm",
        "--lg",
        "--success",
        "--warning",
        "--danger",
        "--indeterminate"
      ],
      "elements": [
        ".vt-progress-wrap",
        ".vt-progress-wrap__label",
        ".vt-progress-wrap__value"
      ],
      "notes": "Spinner: use .vt-spinner with --xs --sm --lg --xl sizes and --success --warning --danger variants."
    },
    {
      "class": "vt-field",
      "element": "div",
      "description": "Form field layout wrapper. Use with .vt-label, .vt-field-hint, .vt-field-error.",
      "elements": [
        ".vt-label",
        ".vt-field-hint",
        ".vt-field-error"
      ]
    },
    {
      "class": "vt-stack",
      "element": "div | section | *",
      "description": "Vertical flex column. Children stack top-to-bottom with uniform gap. Default gap: --vt-space-4.",
      "modifiers": [
        "--gap-1",
        "--gap-2",
        "--gap-3",
        "--gap-4",
        "--gap-5",
        "--gap-6",
        "--gap-8",
        "--center",
        "--end"
      ],
      "notes": "Override gap inline: style=\"--vt-stack-gap: var(--vt-space-6)\""
    },
    {
      "class": "vt-cluster",
      "element": "div | *",
      "description": "Horizontal wrapping flex row for inline groups: buttons, tags, breadcrumbs. Default gap: --vt-space-3.",
      "modifiers": [
        "--gap-1",
        "--gap-2",
        "--gap-3",
        "--gap-4",
        "--gap-5",
        "--gap-6",
        "--center",
        "--end",
        "--between"
      ],
      "notes": "Override gap inline: style=\"--vt-cluster-gap: var(--vt-space-4)\""
    },
    {
      "class": "vt-grid",
      "element": "div | *",
      "description": "Responsive auto-fit CSS grid. Columns collapse below --vt-grid-min (default 16rem) with no media queries. Default gap: --vt-space-5.",
      "modifiers": [
        "--cols-2",
        "--cols-3",
        "--cols-4",
        "--gap-1",
        "--gap-2",
        "--gap-3",
        "--gap-4",
        "--gap-5",
        "--gap-6",
        "--gap-8"
      ],
      "notes": "Override min column width inline: style=\"--vt-grid-min: 12rem\". container-type: inline-size set — child components can use @container queries per cell."
    },
    {
      "class": "vt-container",
      "element": "div | *",
      "description": "Centered max-width page wrapper with horizontal padding. Default max-width: 72rem (~1152px).",
      "modifiers": [
        "--sm",
        "--md",
        "--lg",
        "--xl",
        "--full"
      ],
      "notes": "sm=640px md=896px lg=1280px xl=1536px full=no max-width. Override inline: style=\"--vt-container-width: 60rem\""
    }
  ],
  "shadowDom": {
    "mechanism": "@property inherits: true",
    "description": "All tokens cross Shadow DOM boundaries automatically. No CSS injection needed. Use Volty.adoptStyles(shadowRoot) to also enable component classes inside shadow trees.",
    "api": {
      "Volty.adoptStyles(shadowRoot)": "Inject component stylesheet via adoptedStyleSheets.",
      "Volty.createShadow(host)": "attachShadow + adoptStyles in one call.",
      "Volty.setTokens(el, tokens)": "Scope token overrides to an element; cascades into all shadow descendants."
    }
  }
}