{
  "semanticColors": [
    "primary",
    "secondary",
    "accent",
    "neutral",
    "info",
    "success",
    "warning",
    "error"
  ],
  "semanticColorsNote": "These eight are the DEFAULT roles, not a closed list — see customColors. An app can register any number of extra roles, and they work everywhere a built-in one does.",
  "customColors": {
    "summary": "Silica's core promise: N named colors cascade through everything. A color you register gets the full utility trio AND every component variant, with no codegen step and no safelist.",
    "howToDeclare": "@plugin \"@wizeworks/silicaui\" { colors: primary, secondary, accent, neutral, info, success, warning, error, brand; }\n@theme { --color-brand: #7c3aed; }",
    "declareNote": "The `colors:` list REPLACES the default set, so re-list the built-ins you still want. Using a `*-brand` class without registering `brand` leaves it unstyled; the plugin warns at build time (warn-unregistered-colors.js).",
    "contentNote": "`--color-brand-content` (the legible ink ON brand) is optional — omit it and Silica auto-derives black/white by measured contrast. Declare it only to override that choice.",
    "utilities": [
      "text-<color>",
      "bg-<color>",
      "border-<color>",
      "text-<color>-content",
      "bg-<color>-content",
      "border-<color>-content"
    ],
    "componentPatterns": [
      "alert-<color>",
      "avatar-<color>",
      "badge-<color>",
      "btn-<color>",
      "calendar-<color>",
      "chat-bubble-<color>",
      "checkbox-<color>",
      "data-table-<color>",
      "dock-<color>",
      "filter-<color>",
      "input-<color>",
      "link-<color>",
      "meter-<color>",
      "multi-select-<color>",
      "pagination-<color>",
      "pin-input-cell-<color>",
      "progress-<color>",
      "radio-<color>",
      "range-<color>",
      "rating-<color>",
      "segment-field-<color>",
      "select-<color>",
      "sidebar-<color>",
      "slider-<color>",
      "status-<color>",
      "step-<color>",
      "switch-<color>",
      "tabs-<color>",
      "tag-input-<color>",
      "textarea-<color>",
      "toast[data-type=\"<color>\"]",
      "toggle-<color>",
      "toggle-group-<color>",
      "wizard-<color>",
      "wordmark-<color>"
    ],
    "componentPatternsNote": "Every colorable component, as a selector template — substitute a registered color name. Most are `<root>-<color>`; chat, pin-input and toast are not, so read the pattern rather than assuming.",
    "builderNote": "In @wizeworks/silicaui-builder, a color invented live in the theme editor is generated at runtime (scoped to the canvas) from these same patterns, so it behaves identically to a build-time-declared one without a rebuild."
  },
  "light": {
    "base-100": "oklch(98% 0.003 250)",
    "base-200": "oklch(95% 0.004 250)",
    "base-300": "oklch(90% 0.006 250)",
    "base-content": "oklch(21% 0.012 255)",
    "primary": "oklch(42% 0.055 252)",
    "primary-content": "oklch(98% 0.004 250)",
    "secondary": "oklch(55% 0.035 255)",
    "secondary-content": "oklch(98% 0.004 250)",
    "accent": "oklch(64% 0.13 211)",
    "accent-content": "oklch(15% 0.02 255)",
    "neutral": "oklch(26% 0.014 255)",
    "neutral-content": "oklch(95% 0.004 250)",
    "info": "oklch(68% 0.1 232)",
    "info-content": "oklch(16% 0.03 232)",
    "success": "oklch(70% 0.12 150)",
    "success-content": "oklch(18% 0.03 150)",
    "warning": "oklch(80% 0.11 85)",
    "warning-content": "oklch(24% 0.04 85)",
    "error": "oklch(58% 0.17 25)",
    "error-content": "oklch(100% 0 0)"
  },
  "dark": {
    "base-100": "oklch(16% 0.01 255)",
    "base-200": "oklch(13.5% 0.01 255)",
    "base-300": "oklch(11% 0.01 255)",
    "base-content": "oklch(93% 0.006 250)",
    "primary": "oklch(72% 0.06 252)",
    "primary-content": "oklch(14% 0.015 255)",
    "secondary": "oklch(78% 0.035 255)",
    "secondary-content": "oklch(15% 0.015 255)",
    "accent": "oklch(72% 0.13 211)",
    "accent-content": "oklch(14% 0.02 255)",
    "neutral": "oklch(32% 0.016 255)",
    "neutral-content": "oklch(93% 0.006 250)",
    "info": "oklch(74% 0.09 232)",
    "info-content": "oklch(14% 0.03 232)",
    "success": "oklch(75% 0.11 150)",
    "success-content": "oklch(14% 0.03 150)",
    "warning": "oklch(83% 0.1 85)",
    "warning-content": "oklch(16% 0.04 85)",
    "error": "oklch(66% 0.18 25)",
    "error-content": "oklch(14% 0.03 25)"
  },
  "scalarTokens": [
    {
      "key": "--radius-selector",
      "label": "Selector radius",
      "group": "radius",
      "default": "1rem",
      "unit": "rem",
      "min": 0,
      "max": 2,
      "step": 0.05,
      "doc": "Corner radius for round selector controls (Radio, Checkbox, Switch, Toggle)."
    },
    {
      "key": "--radius-field",
      "label": "Field radius",
      "group": "radius",
      "default": "0.25rem",
      "unit": "rem",
      "min": 0,
      "max": 2,
      "step": 0.05,
      "doc": "Corner radius for form fields — Input, Select, Textarea, Button, etc."
    },
    {
      "key": "--radius-box",
      "label": "Box radius",
      "group": "radius",
      "default": "0.5rem",
      "unit": "rem",
      "min": 0,
      "max": 2,
      "step": 0.05,
      "doc": "Corner radius for box-tier surfaces — Card, Dialog, Popover, Dropdown, and similar containers."
    },
    {
      "key": "--border",
      "label": "Border width",
      "group": "form",
      "default": "1px",
      "unit": "px",
      "min": 0,
      "max": 4,
      "step": 0.5,
      "doc": "Hairline border width shared by fields and box surfaces (Input, Card, etc.)."
    },
    {
      "key": "--size-field",
      "label": "Field size",
      "group": "form",
      "default": "0.25rem",
      "unit": "rem",
      "min": 0.15,
      "max": 0.4,
      "step": 0.01,
      "doc": "Base unit fields scale their height/padding from — raising it enlarges Input/Select/Button uniformly."
    },
    {
      "key": "--size-selector",
      "label": "Selector size",
      "group": "form",
      "default": "0.25rem",
      "unit": "rem",
      "min": 0.15,
      "max": 0.4,
      "step": 0.01,
      "doc": "Base unit selector controls scale from — raising it enlarges Checkbox/Radio/Switch/Toggle/Badge uniformly. The selector tier is sized separately from fields so a dense checkbox can sit next to a large input."
    },
    {
      "key": "--depth",
      "label": "Depth",
      "group": "effects",
      "default": "1",
      "unit": "",
      "min": 0,
      "max": 1,
      "step": 1,
      "doc": "Shadow intensity on Card (resting + hover-lift box-shadow) and Button (inset highlight + drop shadow on solid fills). Set to 0 for fully flat surfaces — no per-component shadow-none needed."
    },
    {
      "key": "--noise",
      "label": "Noise",
      "group": "effects",
      "default": "0",
      "unit": "",
      "min": 0,
      "max": 1,
      "step": 1,
      "doc": "Grain texture on the themed surface — the `[data-theme]` element itself, so it covers the page and every scoped island while Card and other raised surfaces keep their clean fill. An on/off switch (1 or 0), not a strength dial: it gates a tiling SVG grain that blends against `--color-base-100`, so one texture reads on light and dark alike."
    },
    {
      "key": "--focus-width",
      "label": "Focus ring width",
      "group": "effects",
      "default": "2px",
      "unit": "px",
      "min": 0,
      "max": 6,
      "step": 0.5,
      "doc": "Outline width of the keyboard focus ring across interactive components."
    },
    {
      "key": "--focus-offset",
      "label": "Focus ring offset",
      "group": "effects",
      "default": "2px",
      "unit": "px",
      "min": 0,
      "max": 6,
      "step": 1,
      "doc": "Gap between the control's edge and its focus ring. Fields render the ring as a two-stop box-shadow (base-100 spacer, then the accent), so the offset is what keeps the ring from sitting flush against the border."
    },
    {
      "key": "--disabled-opacity",
      "label": "Disabled opacity",
      "group": "effects",
      "default": "0.5",
      "unit": "",
      "min": 0.2,
      "max": 1,
      "step": 0.05,
      "doc": "Opacity applied to disabled controls."
    },
    {
      "key": "--duration",
      "label": "Transition speed",
      "group": "motion",
      "default": "150ms",
      "unit": "ms",
      "min": 0,
      "max": 500,
      "step": 25,
      "doc": "Length of every state transition in the library — hover, focus, open/close, checked. Snappy-vs-relaxed is a brand axis, so it is one token rather than a per-component prop. Under `prefers-reduced-motion: reduce` it is forced to 0.01ms and a theme's value is ignored."
    },
    {
      "key": "--ease",
      "label": "Transition easing",
      "group": "motion",
      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
      "unit": "",
      "options": [
        {
          "label": "Standard",
          "value": "cubic-bezier(0.4, 0, 0.2, 1)"
        },
        {
          "label": "Linear",
          "value": "linear"
        },
        {
          "label": "Out",
          "value": "cubic-bezier(0, 0, 0.2, 1)"
        },
        {
          "label": "Spring",
          "value": "cubic-bezier(0.34, 1.56, 0.64, 1)"
        }
      ],
      "doc": "Timing function paired with `--duration` on those same transitions. `Spring` overshoots past the target and settles back — the difference between a UI that feels mechanical and one that feels physical."
    }
  ],
  "typography": {
    "baseFontSize": "100% (≈16px) — an explicit anchor, not the UA default by accident; the whole rem-based type scale (text-md = 1rem) scales with it.",
    "scale": {
      "xs": {
        "class": "text-xs",
        "fontSize": "0.75rem",
        "px": 12,
        "lineHeight": "1rem"
      },
      "sm": {
        "class": "text-sm",
        "fontSize": "0.875rem",
        "px": 14,
        "lineHeight": "1.25rem"
      },
      "md": {
        "class": "text-md",
        "fontSize": "1rem",
        "px": 16,
        "lineHeight": "1.5rem"
      },
      "base": {
        "class": "text-base",
        "fontSize": "1rem",
        "px": 16,
        "lineHeight": "1.5rem"
      },
      "lg": {
        "class": "text-lg",
        "fontSize": "1.125rem",
        "px": 18,
        "lineHeight": "1.75rem"
      },
      "xl": {
        "class": "text-xl",
        "fontSize": "1.25rem",
        "px": 20,
        "lineHeight": "1.75rem"
      },
      "2xl": {
        "class": "text-2xl",
        "fontSize": "1.5rem",
        "px": 24,
        "lineHeight": "2rem"
      },
      "3xl": {
        "class": "text-3xl",
        "fontSize": "1.875rem",
        "px": 30,
        "lineHeight": "2.25rem"
      },
      "4xl": {
        "class": "text-4xl",
        "fontSize": "2.25rem",
        "px": 36,
        "lineHeight": "2.5rem"
      },
      "5xl": {
        "class": "text-5xl",
        "fontSize": "3rem",
        "px": 48,
        "lineHeight": "1"
      },
      "6xl": {
        "class": "text-6xl",
        "fontSize": "3.75rem",
        "px": 60,
        "lineHeight": "1"
      },
      "7xl": {
        "class": "text-7xl",
        "fontSize": "4.5rem",
        "px": 72,
        "lineHeight": "1"
      },
      "8xl": {
        "class": "text-8xl",
        "fontSize": "6rem",
        "px": 96,
        "lineHeight": "1"
      },
      "9xl": {
        "class": "text-9xl",
        "fontSize": "8rem",
        "px": 128,
        "lineHeight": "1"
      },
      "10xl": {
        "class": "text-10xl",
        "fontSize": "10rem",
        "px": 160,
        "lineHeight": "1"
      }
    },
    "scaleNote": "The `text-*` size ladder — `text-md` == `text-base` == 1rem == 16px. `text-8xl`/`9xl` match Tailwind's defaults; `text-10xl` (160px) extends past them. Prefer a step over a `text-[13px]` magic number.",
    "fontFamilyTokens": [
      "--font-sans",
      "--font-serif",
      "--font-mono"
    ],
    "note": "Every non-namespace token (see scalarTokens above) carries its default inline via var(--token, default) in each component, so an app's own :root/@theme override always wins. --duration is the one token an app cannot always win: under prefers-reduced-motion: reduce it is forced to 0.01ms with !important, on :root and on every [data-theme] island."
  }
}