{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Design Tokens Reference",
      "layout": "vertical",
      "gap": 20,
      "children": [
        {
          "type": "text",
          "id": "tokens_title",
          "name": "Title",
          "content": "GoodGo Design System Tokens",
          "fontSize": 32,
          "fill": "$text-primary"
        },
        {
          "type": "text",
          "id": "tokens_subtitle",
          "name": "Subtitle",
          "content": "Multi-Vertical Platform Tokens",
          "fontSize": 16,
          "fill": "$text-secondary"
        }
      ]
    }
  ],
  "variables": {
    "bg-page": { "type": "color", "value": "#0A0A0B" },
    "bg-surface": { "type": "color", "value": "#111113" },
    "bg-elevated": { "type": "color", "value": "#1A1A1D" },
    "bg-interactive": { "type": "color", "value": "#2A2A2E" },
    "bg-hover": { "type": "color", "value": "#3A3A3E" },
    "bg-active": { "type": "color", "value": "#4A4A4E" },

    "text-primary": { "type": "color", "value": "#FFFFFF" },
    "text-secondary": { "type": "color", "value": "#ADADB0" },
    "text-tertiary": { "type": "color", "value": "#8B8B90" },
    "text-muted": { "type": "color", "value": "#6B6B70" },
    "text-disabled": { "type": "color", "value": "#4B4B50" },
    "text-inverse": { "type": "color", "value": "#0A0A0B" },

    "border-default": { "type": "color", "value": "#2A2A2E" },
    "border-subtle": { "type": "color", "value": "#1F1F23" },
    "border-strong": { "type": "color", "value": "#4A4A4E" },
    "border-focus": { "type": "color", "value": "#FF5C00" },

    "accent-primary": { "type": "color", "value": "#FF5C00" },
    "accent-primary-hover": { "type": "color", "value": "#FF7A33" },
    "accent-primary-active": { "type": "color", "value": "#E55200" },
    "orange-primary": { "type": "color", "value": "#FF5C00" },
    "orange-light": { "type": "color", "value": "#FF8A4C" },

    "status-success": { "type": "color", "value": "#22C55E" },
    "status-success-bg": { "type": "color", "value": "#22C55E1A" },
    "status-warning": { "type": "color", "value": "#F59E0B" },
    "status-warning-bg": { "type": "color", "value": "#F59E0B1A" },
    "status-error": { "type": "color", "value": "#EF4444" },
    "status-error-bg": { "type": "color", "value": "#EF44441A" },
    "status-info": { "type": "color", "value": "#3B82F6" },
    "status-info-bg": { "type": "color", "value": "#3B82F61A" },
    "green-success": { "type": "color", "value": "#22C55E" },

    "vertical-restaurant": { "type": "color", "value": "#FF5C00" },
    "vertical-bar": { "type": "color", "value": "#8B5CF6" },
    "vertical-karaoke": { "type": "color", "value": "#EC4899" },
    "vertical-spa": { "type": "color", "value": "#14B8A6" },
    "vertical-retail": { "type": "color", "value": "#3B82F6" },

    "space-1": { "type": "number", "value": 4 },
    "space-2": { "type": "number", "value": 8 },
    "space-3": { "type": "number", "value": 12 },
    "space-4": { "type": "number", "value": 16 },
    "space-5": { "type": "number", "value": 20 },
    "space-6": { "type": "number", "value": 24 },
    "space-8": { "type": "number", "value": 32 },
    "space-10": { "type": "number", "value": 40 },
    "space-12": { "type": "number", "value": 48 },

    "radius-sm": { "type": "number", "value": 4 },
    "radius-md": { "type": "number", "value": 8 },
    "radius-lg": { "type": "number", "value": 12 },
    "radius-xl": { "type": "number", "value": 16 },
    "radius-full": { "type": "number", "value": 9999 },

    "text-xs": { "type": "number", "value": 12 },
    "text-sm": { "type": "number", "value": 14 },
    "text-base": { "type": "number", "value": 16 },
    "text-lg": { "type": "number", "value": 18 },
    "text-xl": { "type": "number", "value": 20 },
    "text-2xl": { "type": "number", "value": 24 },
    "text-3xl": { "type": "number", "value": 30 },
    "text-4xl": { "type": "number", "value": 36 },

    "font-normal": { "type": "string", "value": "400" },
    "font-medium": { "type": "string", "value": "500" },
    "font-semibold": { "type": "string", "value": "600" },
    "font-bold": { "type": "string", "value": "700" },

    "shadow-sm": { "type": "string", "value": "0 1px 2px rgba(0,0,0,0.3)" },
    "shadow-md": { "type": "string", "value": "0 4px 6px rgba(0,0,0,0.4)" },
    "shadow-lg": { "type": "string", "value": "0 10px 15px rgba(0,0,0,0.5)" },
    "shadow-xl": { "type": "string", "value": "0 20px 25px rgba(0,0,0,0.6)" }
  }
}