{
  "version": "1",
  "name": "Modern CSS example project",
  "compiler": {
    "variableName": "color-brand",
    "baseColor": "#2563EB",
    "secondaryColor": "#2DD4BF",
    "lightColor": "#FFFFFF",
    "darkColor": "#0F172A",
    "mixAmount": 72,
    "mixSpace": "oklch",
    "hueInterpolation": "shorter",
    "relativeLightness": 8,
    "relativeChroma": 0.82,
    "relativeHue": 0,
    "alpha": 1,
    "cmyk": { "c": 84, "m": 58, "y": 0, "k": 8 }
  },
  "recipe": [
    { "id": "hover", "operation": "darken", "amount": 7, "enabled": true, "label": "Hover" },
    { "id": "active", "operation": "darken", "amount": 13, "enabled": true, "label": "Active" },
    { "id": "subtle", "operation": "mute", "amount": 68, "enabled": true, "label": "Subtle surface" },
    { "id": "border", "operation": "mix-surface", "amount": 64, "enabled": true, "label": "Border" },
    { "id": "focus", "operation": "vivid", "amount": 18, "enabled": true, "label": "Focus ring" },
    { "id": "disabled", "operation": "alpha", "amount": 42, "enabled": true, "label": "Disabled" }
  ],
  "cssSource": ":root {\n  --brand: #2563eb;\n}\n\n.button {\n  color: white;\n  background: #2563eb;\n  border: 1px solid #1d4ed8;\n}",
  "selectedFeature": "color-mix",
  "createdAt": "2026-07-22T00:00:00.000Z",
  "updatedAt": "2026-07-22T00:00:00.000Z"
}