{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Mode Switch Showcase",
      "width": 1200,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 40,
      "padding": 40,
      "children": [
        {
          "type": "frame",
          "id": "ModeSwitchContainer",
          "name": "Molecule/ModeSwitch/Container",
          "reusable": true,
          "width": 600,
          "height": 48,
          "layout": "horizontal",
          "justifyContent": "center",
          "alignItems": "center",
          "gap": 4,
          "padding": 4,
          "fill": "$bg-surface",
          "cornerRadius": 12,
          "children": [
            {
              "type": "frame",
              "id": "MSRestaurant",
              "name": "modeRestaurantActive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [8, 16],
              "fill": "$orange-primary",
              "cornerRadius": 8,
              "children": [
                {"type": "icon_font", "id": "MSRestIcon", "iconFontName": "utensils", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"},
                {"type": "text", "id": "MSRestLabel", "content": "Nhà hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "#FFFFFF"}
              ]
            },
            {
              "type": "frame",
              "id": "MSBar",
              "name": "modeBarInactive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [8, 16],
              "cornerRadius": 8,
              "children": [
                {"type": "icon_font", "id": "MSBarIcon", "iconFontName": "wine", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "$text-secondary"},
                {"type": "text", "id": "MSBarLabel", "content": "Bar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "$text-secondary"}
              ]
            },
            {
              "type": "frame",
              "id": "MSKaraoke",
              "name": "modeKaraokeInactive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [8, 16],
              "cornerRadius": 8,
              "children": [
                {"type": "icon_font", "id": "MSKarIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "$text-secondary"},
                {"type": "text", "id": "MSKarLabel", "content": "Karaoke", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "$text-secondary"}
              ]
            },
            {
              "type": "frame",
              "id": "MSSpa",
              "name": "modeSpaInactive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [8, 16],
              "cornerRadius": 8,
              "children": [
                {"type": "icon_font", "id": "MSSpaIcon", "iconFontName": "sparkles", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "$text-secondary"},
                {"type": "text", "id": "MSSpaLabel", "content": "Spa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "$text-secondary"}
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ModeIndicators",
          "name": "modeIndicatorsRow",
          "layout": "horizontal",
          "gap": 16,
          "children": [
            {
              "type": "frame",
              "id": "ModeIndRestaurant",
              "name": "Molecule/ModeIndicator/Restaurant",
              "reusable": true,
              "width": 32,
              "height": 32,
              "layout": "vertical",
              "justifyContent": "center",
              "alignItems": "center",
              "fill": "$orange-primary",
              "cornerRadius": 9999,
              "children": [
                {"type": "icon_font", "id": "MIRestIcon", "iconFontName": "utensils", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"}
              ]
            },
            {
              "type": "frame",
              "id": "ModeIndBar",
              "name": "Molecule/ModeIndicator/Bar",
              "reusable": true,
              "width": 32,
              "height": 32,
              "layout": "vertical",
              "justifyContent": "center",
              "alignItems": "center",
              "fill": "$bar-primary",
              "cornerRadius": 9999,
              "children": [
                {"type": "icon_font", "id": "MIBarIcon", "iconFontName": "wine", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"}
              ]
            },
            {
              "type": "frame",
              "id": "ModeIndKaraoke",
              "name": "Molecule/ModeIndicator/Karaoke",
              "reusable": true,
              "width": 32,
              "height": 32,
              "layout": "vertical",
              "justifyContent": "center",
              "alignItems": "center",
              "fill": "$karaoke-primary",
              "cornerRadius": 9999,
              "children": [
                {"type": "icon_font", "id": "MIKarIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"}
              ]
            },
            {
              "type": "frame",
              "id": "ModeIndSpa",
              "name": "Molecule/ModeIndicator/Spa",
              "reusable": true,
              "width": 32,
              "height": 32,
              "layout": "vertical",
              "justifyContent": "center",
              "alignItems": "center",
              "fill": "$spa-primary",
              "cornerRadius": 9999,
              "children": [
                {"type": "icon_font", "id": "MISpaIcon", "iconFontName": "sparkles", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"}
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "bar-primary": {"type": "color", "value": "#8B5CF6"},
    "karaoke-primary": {"type": "color", "value": "#EC4899"},
    "spa-primary": {"type": "color", "value": "#14B8A6"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"}
  }
}
